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

里昂·加班

我在这里一直遵循此FormData教程，但是尚未了解formData对象如何工作。

我的输入表格

<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后才将其发送到Factory，这就是结果，我看不到pdf-file任何密钥或PDF，只是一堆方法？文件也附加在哪里？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);
};

乔治

组 `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（）方法设置的内容类型。当XHR API发送FORMDATA对象时，它自动将内容类型设置到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服务API参考-设置HTTP标头

FormData对象（例如blob）是非JavaScript的主机定义对象。console.log或不能看到它们的所有属性console.dir。文件是Blob的一种特殊类型。数据不一定从磁盘加载。通常，仅在特定API需要时才从磁盘流式传输数据。

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

中的内容multipart/form-data使用base64编码，这会增加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将自动设置内容类型的文件。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-5

我来说两句

0 条评论

登录后参与评论

上一篇：从Azure函数中的配置文件加载连接字符串

TOP 榜单

文章