如何在POSTing到服务器之前正确地将文件附加到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>

upload按钮的功能如下：

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 object .files[0]时，我会看到刚才附加的文件：

​

​

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

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

我登出之前，我把它发送到我的工厂和这是结果，我没有看到密钥pdf-file或任何地方的formData，只是一堆方法？这个文件也会被附加到哪里？formData如何包含实际的PDF？

​

​

我需要从我假定的formData对象附加一些东西：

发出POST请求的工厂

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

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请求={方法：'POST'，url：'http://example.com'，标头：{‘内容类型’：未定义}，数据：{ test：'test‘}}

— AngularJS $http Service API Reference - Setting HTTP Headers

像blobs这样的FormData objects是主机定义的对象，不是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会自动将内容类型设置为文件的内容类型。