如何使用 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 后端会出现未定义的情况。这是 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，而不是 body

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