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

标签 asp.net asp.net-mvc angular typescript asp.net-core

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

这里是 Controller 方法。

[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 调用。调用是对 Controller 方法的调用。

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

这是发送到服务器之前的数据。

picture sending the data

但在 Controller 中文件的值为空。

null value in the file interface

其他属性绑定(bind)到 Controller 参数只有文件没有绑定(bind)。

谁能告诉我我哪里做错了。 引用资料 - ASP.NET Core 2.0 and Angular 4.3 File Upload with progress

最佳答案

您需要发送像 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);
}

关于asp.net - 在 asp.net core 2.0 中使用 angular 5 上传文件。文件为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48731744/

相关文章:

asp.net - 连接到 https ://webservice in asp. 网络应用程序

asp.net-mvc - 使用 angular.js 应用程序进行 SEO

angular - 无法在 Angular Reactive Forms 中的 Form Load 上设置默认值

angular - 2 个组件之间的 2 路绑定(bind)仅适用于第一个字母

javascript - Angular - 在 Http 请求中包含模型 getter 和 setter

javascript - 避免在 ASP.NET 中单击具有 onClick 和 onClientClick 事件的按钮时重新加载页面

asp.net - ASP.NET Core 中的 Server.MapPath 等价物是什么?

c# - Native Assembly Binding fails for ASP.NET解决方案

c# - Razor @Html.ValidationMessageFor() 不显示 "validation error message"

css - 我应该如何使用 ASP.NET MVC 4 进行布局管理?