Angular 5 文件上传：JSON 解析错误 - Django Rest 框架答案

【问题标题】：Angular 5 file upload: JSON parse error - Django Rest FrameworkAngular 5 文件上传：JSON 解析错误 - Django Rest 框架
【发布时间】：2018-04-20 09:21:04
【问题描述】：

我想从我的 Angular 5 前端上传 so 文件。我在后端使用 Django Rest Framework。

这是我上传文件的 Angular 服务：

  uploadStudentFile(solution_id: number, file: File): Observable<SolutionRealFile> {
    let url = `${this.url}/solutions/${solution_id}/file_uploads/`;
    const formData: FormData = new FormData();
    formData.append('file_src', file, file.name);
    return this.httpClient.post<SolutionRealFile>(url, formData, { headers: this.headers })
      .pipe(
        catchError(this.handleError('Upload file', new SolutionRealFile()))
      );
  }

在浏览器中从我的应用程序运行请求时，请求失败并显示HTTP/1.1" 400 73，这是错误消息：

{"detail":"JSON parse error - Expecting value: line 1 column 1 (char 0)"}

但是使用 Postman 的相同文件运行相同的请求，一切正常。我是 Angular 5 的新手，也许只是一个小问题不确定。

编辑 1：

标题：

'Content-Type': 'application/json',
'Authorization': `JWT ${localStorage.getItem(TOKEN_NAME)}`

【问题讨论】：

你能告诉我 this.headers 的值吗？
我已将它们添加到帖子中。
在 headers 对象中添加 'responseType': 'text'
将'enctype': 'multipart/form-data' 添加到您的标题
另外我认为你需要删除内容类型标题

标签： django angular django-rest-framework

【解决方案1】：

要将HttpClient 与FormData 一起使用，您需要将'enctype': 'multipart/form-data' 添加到您的标头并删除content-type 标头。

content-type 将由浏览器根据生成的表单边界自动设置，并且您需要 multipart 编码类型，就像在纯 html 表单的情况下一样。这样，您的服务器将能够以与发送纯 html 表单相同的方式读取文件。

更多关于为什么需要multipart 类型的信息可以在这篇文章中找到：What does enctype='multipart/form-data' mean?

【讨论】：