无法将文件从 Angular 8 上传到 Asp.net Core 2.2
Unable to File Upload From Angular 8 to Asp.net Core 2.2
我有 asp.net 核心服务器(使用 .net 核心 2.2)有 FileUploadController 监听传入文件的 post 请求。
[HttpPost("Upload")]
// public async Task<IActionResult> Upload([FromForm(Name="file")]IFormFile file) {
// public async Task<IActionResult> Upload([FromForm]IFormFile file) {
public async Task<IActionResult> Upload(IFormFile file) {
Console.WriteLine("***" + file);
if(file == null) return BadRequest("NULL FILE");
if(file.Length == 0) return BadRequest("Empty File");
Console.WriteLine("***" + host.WebRootPath);
if (string.IsNullOrWhiteSpace(host.WebRootPath))
{
host.WebRootPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot");
}
var uploadsFolderPath = Path.Combine(host.WebRootPath, "uploads");
if (!Directory.Exists(uploadsFolderPath)) Directory.CreateDirectory(uploadsFolderPath);
var fileName = "Master" + Path.GetExtension(file.FileName);
var filePath = Path.Combine(uploadsFolderPath, fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
return Ok("Okay");
}
我已经创建了 angular 应用程序(使用 angular 版本 8),它可以选择要上传到 ClientApplication and I have created three post service that called to the api "http://localhost:5000/api/fileupload/upload 的文件。
标准 Angular HttpClient Post。当服务器读取时,IFormFile 为空。
const formData: FormData = new FormData();
formData.append('file', file, file.name);
// return this.http.post(this.endpoint, file);
return this.http.post(this.endpoint, formData); // Problem solved
添加了 HttpHeaders,我尝试清空 headers、undefined 以及来自 Whosebug 和 google.
的其他建议解决方案
const header = new HttpHeaders() //1
header.append('enctype', 'multipart/form-data'); //2
header.append('Content-Type', 'multipart/form-data'); //3
如果我将 httpheader 与资源放在请求中,服务器会给出 415(不支持的媒体类型)
我尝试来自“@angular/common/http”的 HttpRequest,它最终给我想要的结果。
const formData: FormData = new FormData();
formData.append('file', file, file.name);
const req = new HttpRequest('POST', this.endpoint, formData);
return this.http.request(req);
我想知道是bug还是我的误会?如果你查看在线教程,大多数开发人员使用 "this.HttpClient.post"。
根据我的阅读,我可以使用 httpclient.post 和 angular 框架将为用户自动设置正确的 header。它似乎没有完成这项工作。
After thorough investigation, first error is my mistake of using file
instead of formData, second error is header "content-type" declare in
httpinterceptor which after removed, it load the file as expected.
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// add authorization header with jwt token if available
// if (request.url.indexOf('/upload')) {
// return next.handle(request);
// }
const token = localStorage.getItem('token');
const currentUser = JSON.parse(localStorage.getItem('user'));
if (currentUser && token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`,
// 'Content-Type': 'application/json' <---- Main Problem.
}
});
}
return next.handle(request).pipe(catchError(err => this.handleError(err)));
}
}
下面的代码适合你
uploadSecond(file: File) {
const formData: FormData = new FormData();
formData.append('file', file, file.name);
return this.http.post('https://localhost:44393/api/fileupload/UploadSecond', formData);
}
然后在你的控制器中
[HttpPost("UploadSecond")]
[DisableRequestSizeLimit]
public async Task<IActionResult> UploadSecond([FromForm]IFormFile file)
在第一个不起作用的示例中,您将 file
传递给 post(...)
而不是 formData
。应该是:
const formData: FormData = new FormData();
formData.append('file', file, file.name);
return this.http.post(this.endpoint, formData);
您为控制器显示的代码似乎是正确的,因此这应该是唯一需要的更改。您 不需要 对从 Angular.
发送的请求设置任何自定义 headers
如果您在客户端中使用 FormData,您可以获得这样的文件。
[HttpPost("Upload"), DisableRequestSizeLimit]
public ActionResult Upload()
{
try
{
var file = Request.Form.Files[0];
var folderName = Path.Combine("Resources","Images");
var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);
if (file.Length > 0)
{
var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
var fullPath = Path.Combine(pathToSave, fileName);
var dbPath = Path.Combine(folderName, fileName);
using (var stream = new FileStream(fullPath, FileMode.Create))
{
file.CopyTo(stream);
}
return Ok(new { dbPath });
}
else
{
return BadRequest();
}
}
catch (Exception ex)
{
return StatusCode(500, "Internal server error");
}
}
我有 asp.net 核心服务器(使用 .net 核心 2.2)有 FileUploadController 监听传入文件的 post 请求。
[HttpPost("Upload")]
// public async Task<IActionResult> Upload([FromForm(Name="file")]IFormFile file) {
// public async Task<IActionResult> Upload([FromForm]IFormFile file) {
public async Task<IActionResult> Upload(IFormFile file) {
Console.WriteLine("***" + file);
if(file == null) return BadRequest("NULL FILE");
if(file.Length == 0) return BadRequest("Empty File");
Console.WriteLine("***" + host.WebRootPath);
if (string.IsNullOrWhiteSpace(host.WebRootPath))
{
host.WebRootPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot");
}
var uploadsFolderPath = Path.Combine(host.WebRootPath, "uploads");
if (!Directory.Exists(uploadsFolderPath)) Directory.CreateDirectory(uploadsFolderPath);
var fileName = "Master" + Path.GetExtension(file.FileName);
var filePath = Path.Combine(uploadsFolderPath, fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
return Ok("Okay");
}
我已经创建了 angular 应用程序(使用 angular 版本 8),它可以选择要上传到 ClientApplication and I have created three post service that called to the api "http://localhost:5000/api/fileupload/upload 的文件。
标准 Angular HttpClient Post。当服务器读取时,IFormFile 为空。
const formData: FormData = new FormData(); formData.append('file', file, file.name); // return this.http.post(this.endpoint, file); return this.http.post(this.endpoint, formData); // Problem solved
添加了 HttpHeaders,我尝试清空 headers、undefined 以及来自 Whosebug 和 google.
的其他建议解决方案const header = new HttpHeaders() //1 header.append('enctype', 'multipart/form-data'); //2 header.append('Content-Type', 'multipart/form-data'); //3
如果我将 httpheader 与资源放在请求中,服务器会给出 415(不支持的媒体类型)
我尝试来自“@angular/common/http”的 HttpRequest,它最终给我想要的结果。
const formData: FormData = new FormData(); formData.append('file', file, file.name); const req = new HttpRequest('POST', this.endpoint, formData); return this.http.request(req);
我想知道是bug还是我的误会?如果你查看在线教程,大多数开发人员使用 "this.HttpClient.post"。 根据我的阅读,我可以使用 httpclient.post 和 angular 框架将为用户自动设置正确的 header。它似乎没有完成这项工作。
After thorough investigation, first error is my mistake of using file instead of formData, second error is header "content-type" declare in httpinterceptor which after removed, it load the file as expected.
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// add authorization header with jwt token if available
// if (request.url.indexOf('/upload')) {
// return next.handle(request);
// }
const token = localStorage.getItem('token');
const currentUser = JSON.parse(localStorage.getItem('user'));
if (currentUser && token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`,
// 'Content-Type': 'application/json' <---- Main Problem.
}
});
}
return next.handle(request).pipe(catchError(err => this.handleError(err)));
}
}
下面的代码适合你
uploadSecond(file: File) {
const formData: FormData = new FormData();
formData.append('file', file, file.name);
return this.http.post('https://localhost:44393/api/fileupload/UploadSecond', formData);
}
然后在你的控制器中
[HttpPost("UploadSecond")]
[DisableRequestSizeLimit]
public async Task<IActionResult> UploadSecond([FromForm]IFormFile file)
在第一个不起作用的示例中,您将 file
传递给 post(...)
而不是 formData
。应该是:
const formData: FormData = new FormData();
formData.append('file', file, file.name);
return this.http.post(this.endpoint, formData);
您为控制器显示的代码似乎是正确的,因此这应该是唯一需要的更改。您 不需要 对从 Angular.
发送的请求设置任何自定义 headers如果您在客户端中使用 FormData,您可以获得这样的文件。
[HttpPost("Upload"), DisableRequestSizeLimit]
public ActionResult Upload()
{
try
{
var file = Request.Form.Files[0];
var folderName = Path.Combine("Resources","Images");
var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);
if (file.Length > 0)
{
var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
var fullPath = Path.Combine(pathToSave, fileName);
var dbPath = Path.Combine(folderName, fileName);
using (var stream = new FileStream(fullPath, FileMode.Create))
{
file.CopyTo(stream);
}
return Ok(new { dbPath });
}
else
{
return BadRequest();
}
}
catch (Exception ex)
{
return StatusCode(500, "Internal server error");
}
}