使用asp.net core 2.0中的angular 5進行文件上傳。 文件為空

Question

我，我正在嘗試使用asp.net core 2.0中的angular 5上傳文件。

這是我的服務器端代碼。

 public class QuestionViewModel
    {
        public Guid QuestionId { get; set; }
        public string QuestionText { get; set; }
        public DateTime CreateDate { get; set; }
        public string PictureUrl { get; set; }
        public FormFile FileUpload { get; set; }
    }

這里是控制器方法。

[HttpPost]
        [AllowAnonymous]
        public JsonResult QuestionPhotoPost([FromBody] QuestionViewModel model)
        {
            GenericResponseObject<List<QuestionViewModel>> genericResponseObject = new GenericResponseObject<List<QuestionViewModel>>();
            genericResponseObject.IsSuccess = false;
            genericResponseObject.Message = ConstaintStingValue.TagConnectionFailed;
            List<QuestionViewModel> questionViewModel = new List<QuestionViewModel>();
            return Json(genericResponseObject);
        }

鍵入Script類

export class Data {
    QuestionText: string = "";
    FileUpload: File;
}

這是http電話。 調用調用控制器方法。

public QuestionPostHttpCall(_loginVM: QuestionVmData): Observable<QuestionPhotoViewModel> {
        console.log(_loginVM)
        const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');

        return this._httpClientModule.post<QuestionPhotoViewModel>(this.questionPhoto, _loginVM, { headers});
    }

這是發送到服務器之前的數據。

但是在控制器中，文件的值為null。

另一個屬性綁定到控制器參數，只有文件沒有綁定。

任何人都可以告訴我我在哪里，做錯了。 參考資料 - ASP.NET Core 2.0和Angular 4.3文件上傳進度

Answer 1

您需要發送類似multipart / form-data的文件。

upload(file: File, questionText: string): Observable<FileResponseModel> {
  const url: string = Urls.uploadFiles();

  const formData: FormData = new FormData();
   formData.append('attachment', file, file.name);
   formData.append('questionText', questionText);

  const options = {
   headers: new HttpHeaders().set('enctype', 'multipart/form-data')
  };

  return this.httpService.post(url, formData, options);
}

Answer 2

前端

private headers: { "Content-Type": "multipart/form-data", boundary: "enterhereurboundary" };

this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('usersFile', file);
    $http.post(uploadUrl, fd, {
        headers: this.headers 
    }) 
    .success(function(){ 
    }) 
    .error(function(){ 
    }); 
} 

后端

    // POST: api/...
    [HttpPost]
    public async Task<ActionResult<string>> UploadUsersAsync(IFormFile usersFile)
    {
        // do something here...
    }

另請注意，前端發送的文件名必須與后端使用的IFormFile變量名相同...

相關鏈接

• https://withintent.uncorkedstudios.com/multipart-form-data-file-upload-with-angularjs-c23bf6eeb298

• https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-2.2

• https://academind.com/learn/angular/snippets/angular-image-upload-made-easy/#select-a-file

• multipart / form-data的邊界是什么？