Question

我想从我的Angular 5前端上传这些文件。我在我的后端使用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)}`

Answer 1

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

然后，浏览器将根据生成的表单边界自动设置

content-type，并且您还需要multipart编码类型，就像普通html格式一样。这样，您的服务器将能够以简单的html格式发送的方式读取文件。

有关您需要multipart类型的详细信息，请参阅此帖子：What does enctype='multipart/form-data' mean?

Angular 5文件上传：JSON解析错误 - Django Rest Framework

编辑1：

1 个答案: