javascript - 如何在发布到服务器之前正确地将文件附加到 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，这就是结果，我没有在任何地方看到 key pdf-file 或那个 PDF，只是一堆方法？文件也被附加到哪里？ formData 如何包含实际的 PDF？

我需要从我假设的 formData 对象中附加一些东西:

发出POST请求的Factory

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 创建的对象时将内容类型 header 设置为 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 框架，自动将内容类型 header 添加为 application/json，它会覆盖 XHR Send() method 设置的内容类型。 .当XHR API发送 FormData object ，它会自动将内容类型设置为具有适当边界的 multipart/form-data。

来自文档:

The $http service will automatically add certain HTTP headers to all requests

To explicitly remove a header automatically added via $httpProvider.defaults.headers on a per request basis, Use the headers property, setting the desired header to undefined. For example:

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喜欢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将自动将内容类型设置为文件的内容类型。