如何在 Angular 中通过 REST API 上传 CSV 文件？答案

【问题标题】：How do I upload CSV file via REST API in Angular?如何在 Angular 中通过 REST API 上传 CSV 文件？
【发布时间】：2020-05-22 07:59:43
【问题描述】：

在我的 html 中，我有：

 name="file" type="file"
 accept=".csv"

在 ts 中：我得到文件 - $event.target.files.item(0);

然后我将它传递给服务

  uploadCSVFile( file) {
    const uploadedFile = new FormData();
    uploadedFile.append( 'file', file, file.name);
    const url = `MyURL`;
    return this.http.post(url, uploadedFile);
  }

问题是它说 File must have a contentType text/csv 但是当我添加标题时 -

{headers:  new HttpHeaders().append('Content-Type', 'text/csv')}

抱怨请求不是多部分的。

【问题讨论】：

在明确设置标头之前，是服务器要求“text/csv”，还是 Angular http 客户端？今天早上我正在做一些 csv 上传的东西，并且不必在我的请求上设置标题，而且你所拥有的看起来不错。我的意思是，也许服务器方法期待不同的东西？
@KurtHamilton 这是我从服务器收到的响应 - 文件必须有 contentType text/csv。请求头有： Content-Type: multipart/form-data;边界=----WebKitFormBoundaryh0fSoB1keNQolXCW 当我查看发送的 FormData 时，它有： Content-Type: application/octet-stream
愚蠢的问题，但它是一个实际的 csv 文件，而不是扩展名为 .csv 的 Excel 文件？我假设您在文本编辑器中打开文件时会看到原始 csv 内容？
@KurtHamilton 我尝试了很多文件——是的，原始内容。这是一个例子 - support.staffbase.com/hc/en-us/articles/…
我下载了一个文件，它们是分号分隔的，不是逗号分隔的。这是标题：Username; Identifier;First name;Last name

标签： javascript angular api csv file-upload

【解决方案1】：

问题与 MIME 类型不匹配有关。文件 MIME 类型在不同平台上不被识别为相同。 .csv 文件在 OSX 中被识别为 text/csv，而在 Windows 中被识别为 application/vnd.ms-excel。

这里是解决方案 - 换行：

 uploadedFile.append( 'file', new Blob([file], { type: 'text/csv' }), file.name);

【讨论】：

【解决方案2】：

您需要将您的内容类型设置为 multipart 您可以修改您的代码，如下所示

uploadCSVFile( file) {
        let formData:FormData = new FormData();
        formData.append('uploadFile', file, file.name);
        let headers = new Headers();
        /** In Angular 5, including the header Content-Type can invalidate your request */
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        return this.http.post(url, formData, options)
}

另一种方法是使用

headers.append('enctype', 'multipart/form-data');

【讨论】：