如何上传文件并使用 Fetch API 包含 JSON 数据？

Question

祝您今天过得愉快。所以我正在使用 Fetch API 将文件上传到服务器，但我还想为我的后端包含一个字符串作为 JSON。但是我做不到。

现在这就是我的上传文件功能的样子。如果我只想上传一个文件而不包含 JSON:

这样的字符串，这将非常有效

const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();

    formData.append( 'data', uploadedFile );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: formData
    });
    
};

uploadFile();

使用 req.files.data 在我的 NodeJS 后端获取文件；

但是如果我包含一个字符串作为 JSON 并尝试上传文件，那么我的 NodeJS 后端会得到 undefined。这就是 string as JSON:

的样子

const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();
    const str          = 'from client';

    formData.append( 'data', uploadedFile );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: {
                file: formData,
                str 
          }
    });
    
};

uploadFile();

现在，如果我想在后端获取文件：

req.files.file, 我得到 undefined.

req.body, 我得到 { 'object Object': '' }.

req.files.data，我得到 UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'data' of undefined。

req.body.data, 我得到 undefined.

这里出了什么问题？

Answer 1

只需将值附加到 FormData 对象，就像您对文件所做的那样

formData.append( 'str', '["some JSON here"]' );

然后继续发送那个对象，body: formData

Answer 2

你将它附加到 FormData，而不是正文

const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();
    const str          = 'from client';

    formData.append( 'data', uploadedFile );
    formData.append( 'str', str );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: formData
    });
    
};

uploadFile();

如何上传文件并使用 Fetch API 包含 JSON 数据？

How can I upload file and also include JSON data with Fetch API?

javascript

jquery

node.js

express

fetch-api