Невозможно загрузить файл из Angular 8 в Asp.net Core 2.2

Question

У меня есть главный сервер asp.net (использующий ядро ​​.net 2.2) с FileUploadController , который прослушивает пост-запрос на входящий файл.

[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");
}  

Я создал угловое приложение (используя угловую версию 8), которое может выбрать файл для загрузки на ClientApplication , и я создал три почтовых сервиса, которые вызывали API "http://localhost:5000/api/fileupload/upload".

1. Стандартная угловая запись HttpClient. Когда сервер читает, 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, я пробую пустые заголовки, неопределенное и другое предлагаемое решение от stackoverflow и google.

const header = new HttpHeaders() //1
header.append('enctype', 'multipart/form-data'); //2
header.append('Content-Type', 'multipart/form-data'); //3

Если я добавлю httpheader с ресурсами в запрос, сервер выдаст415 (неподдерживаемый тип носителя)

Я пробую HttpRequest из '@ angular / common / http', который, наконец, дает мне нужный результат.

const formData: FormData = new FormData();
formData.append('file', file, file.name);
const req = new HttpRequest('POST', this.endpoint, formData);
return this.http.request(req);

Я хочу знать, является ли это ошибкойили мое недоразумение?Если вы посмотрите онлайн-учебник, большинство разработчиков используют this.HttpClient.post.Из того, что я прочитал, я могу использовать httpclient.post, а angular framework автоматически установит правильный заголовок для пользователя.Похоже, что он не выполняет свою работу.

После тщательного расследования, первая ошибка - моя ошибка использования файла вместо formData, вторая ошибка - объявление заголовка "content-type" в httpinterceptor, который после удаления,он загружает файл, как и ожидалось.

@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)));
    }
}

Сервер: "https://github.com/phonemyatt/TestPlaygroundServer"

Клиент:" https://github.com/phonemyatt/TestPlayground"

Answer 1

В вашем первом примере, который не работает, вы передаете file в post(...) вместо formData. Должно быть:

const formData: FormData = new FormData();
formData.append('file', file, file.name);
return this.http.post(this.endpoint, formData);

Код, который вы показываете для контроллера, кажется правильным, так что это должно быть единственным изменением, которое требуется. Вы не должны устанавливать любые пользовательские заголовки для запроса, отправляемого из Angular.

Answer 2

Ниже код работает для вас

  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)

Answer 3

Если вы используете 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");
            }
        }