在POST到服务器之前如何正确地将文件附加到formData？

Question

我一直关注此FormData tutorial here，但尚未了解formData object的工作原理。

我的输入表格

<input type="file" id="file-id" class="w300px rounded4px" name="file" placeholder="PDF file">
<button class="btn-upload-pdf" ng-click="asub.uploadPDF()">Upload</button>

以下是上传按钮功能：

this.uploadPDF = () => {
    const formData = new FormData();
    const fileInput = document.getElementById('file-id');
    const file = fileInput.files[0];
    formData.append('pdf-file', file);
    console.log('formData', formData)

    return ApiFactory.insightPDF(formData).then((res) => {
        console.log('res', res);
        return res;
    });
};

当我退出fileInput对象.files[0]时，我看到了刚刚附加的文件：

这似乎意味着此对象应该足以发送到POST。然而，这是下一步：

formData.append('pdf-file', file);

我在将formData发送到我的工厂之前注销了pdf-file这就是结果，我在任何地方都看不到密钥const insightPDF = (formData) => { console.log(' formData', formData) return $http.post('/app/api/insights_pdf', formData).then((res) => { console.log('PDF uploaded res', res) return res; }).catch(apiError); }; 或PDF，只是一堆方法？文件在哪里也附加了？ formData如何包含实际的PDF？

我需要附加一些我认为的formData对象：

发出POST请求的工厂

let posters = posterList.map {$0.poster}

Answer 1

设置Content-Type: undefined

发布FormData API创建的对象时，将内容类型标题设置为undefined非常重要。

const insightPDF = (formData) => {
    console.log(' formData', formData)
    var config = { headers: {'Content-Type': undefined} };
    return $http.post('/app/api/insights_pdf', formData, config)
     .then((res) => {
        console.log('PDF uploaded res', res)
        return res;
    }).catch(apiError);
};

通常，AngularJS框架会自动将内容类型标题添加为application/json，它会覆盖XHR Send() method设置的内容类型。当XHR API发送FormData object时，它会自动将内容类型设置为multipart/form-data，并具有适当的边界。

来自文档：

  

$ http服务会自动为所有请求添加某些HTTP标头

     

要基于每个请求显式删除通过$httpProvider.defaults.headers自动添加的标头，请使用headers属性，将所需标头设置为undefined。例如：

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': undefined
 },
 data: { test: 'test' }
}

     

— AngularJS $http Service API Reference - Setting HTTP Headers

像FormData objects这样的{p> blobs是非JavaScript原生的主机定义对象。 console.log或console.dir并非所有属性都可以看到。 Files是一种特殊类型的blob。数据不一定从磁盘加载。通常，仅在特定API需要时才从磁盘流式传输数据。

避免额外开销 - 直接发送文件

multipart/form-data中的内容使用base64 encoding，这会增加33％的额外开销。如果只上传一个文件，则直接发送文件blob会更有效。

//MORE Efficient; Avoids base64 encoding overhead

const insightPDF = (dataObject) => {
    var config = { headers: {'Content-Type': undefined} };
    return $http.post('/app/api/insights_pdf', dataObject, config)
     .then((res) => {
        console.log('PDF uploaded res', res)
        return res;
    }).catch(apiError);
};

var file = inputElem[0].files[0];
insightPDF(file);

如果服务器可以直接接受二进制内容，最好以这种方式发送文件。 XHR API会自动将内容类型设置为文件的内容类型。