在POST服务器之前如何正确地将文件附加到formData？ [英] How to correctly attach file to formData before POSTing to server?

问题描述

我一直在关注

 < input type =fileid =file-idclass =w300px rounded4pxname =fileplaceholder =PDF file> 
< button class =btn-upload-pdfng-click =asub.uploadPDF（）>上传< / 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）
 
返回ApiFactory.insightPDF（formData）.then（（res）=> {
 console.log（'res' ，res）; 
 return res; 
}）; 
}; 
  

当我注销 fileInput 对象 .files [0] 我看到刚刚附加的文件：

我需要从formData对象附加一些东西，我猜想：

使得POST请求的工厂

  const insightPDF =（formData）=> （$ res $ = 
 console.log（'formData'，formData）
 return $ http.post（'/ app / api / insights_pdf'，formData）.then（（res）=> {
 console.log（'PDF上传的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}}; 
返回$ http.post（'/ app / api / insights_pdf'，formData，config）
 .then（（res）=> {
 console.log（' ，res）
 return res; 
}）。catch（apiError）; 
}; 
  

通常AngularJS框架将内容类型指定为 application / json ，它覆盖了由 XHR设置的内容类型Send（）方法。当 XHR API 发送 FormData对象，它会自动将内容类型设置为 multipart / form-data 的边界。

/ Web / API / FormDatarel =nofollow noreferrer> FormData对象，比如 blob 是主机定义的非JavaScript本地的对象。不是所有的属性都可以通过 console.log 或 console.dir 来看到。 文件是一种特殊类型的blob。数据不一定从磁盘加载。通常情况下，只有在特定的API需要时，数据才从磁盘进行流式传输。

直接发送文件

在 multipart / form-data 中是 base64编码<这会增加33％的额外开销。如果只上传一个文件，直接发送文件blob会更高效。

  //更高效;避免base64编码开销
 
 const insightPDF =（dataObject）=> {
 var config = {headers：{'Content-Type'：undefined}}; 
返回$ http.post（'/ app / api / insights_pdf'，dataObject，config）
 .then（（res）=> {
 console.log（' ，res）
 return res; 
}）。catch（apiError）; 
}; 
 
 var file = inputElem [0] .files [0]; 
 insightPDF（文件）; 
  

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

I've been following this FormData tutorial here, however have yet to understand how the forData object works.

My input form

<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>

Here is the upload button function:

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

When I log out the fileInput object .files[0] I see the file I just attached:

It would seem to mean that this object should be enough to send along to the POST. However this is the next step:

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

I log out formData before I send it into my Factory and this is the result, I don't see the key pdf-file or that PDF anywhere, just a bunch of methods? Where does the file get appended too? How does formData contain the actual PDF?

I need to attach something from the formData object I presume:

The Factory that makes the POST request

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

解决方案

Set Content-Type: undefined

When posting objects created by the FormData API it is important to set the content type header to 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);
};

Normally the AngularJS framework, specifies the content type as application/json which overrides the content type set by the XHR Send() method. When the XHR API sends a FormData object, it automatically sets the content type to multipart/form-data with the proper boundary.

FormData objects like blobs are host-defined objects non-native to JavaScript. Not all of their properties can be seen by console.log or console.dir. Files are a special type of blob. The data is not necessarily loaded from disk. Usually, the data is streamed from disk only when needed by a specific API.

Send files directly

Content in multipart/form-data is base64 encoded which adds 33% extra overhead. If uploading only one file, it is more efficient to send the file blob directly.

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

If the server can accept binary content directly, it is best to send files that way. The XHR API will automatically set the content type to that of the file.

这篇关于在POST服务器之前如何正确地将文件附加到formData？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！