在 asp.net core 2.0 中使用 angular 5 上传文件。文件为空

Posted 2023-03-27

技术标签:

【中文标题】在 asp.net core 2.0 中使用 angular 5 上传文件。文件为空【英文标题】：File Upload using angular 5 in asp.net core 2.0. File is null 【发布时间】：2018-07-21 18:05:02 【问题描述】：

我正在尝试在 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);

类型脚本类

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 and Angular 4.3 File Upload with progress

【问题讨论】：

【参考方案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);

【讨论】：

尝试在服务器端使用 IFormFile 接口。 Example here【参考方案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 变量名称相同...