如何使用fetch API将上传的文件（图片，pdf）和JSON数据同时传到后端？

Question

我使用 React JS 作为前端框架。我有一个包含不同输入的表单。其中一些是文本输入，另一些是文件上传。这是 post 请求。

        const formData = new FormData();
        const imgUpload = document.querySelector('#imgUpload');
        const mouUpload = document.querySelector('#mouUpload');
        
        //-------setting the form data----------
        formData.append('oName', formValues.oName);
        formData.append('oWeb', formValues.oWeb);
        formData.append('oVC', formValues.oVC);
        formData.append('oVP', formValues.oVP);
        formData.append('oImg', imgUpload.files[0]);
        formData.append('oMou', mouUpload.files[0]);
        

        //---------fetch post request--------------
        fetch('https://httpbin.org/post', {
          method: 'POST',
          body: formData
        })
        .then(response => response.json())
        .then(result => {
          console.log('Success:', result);
        })
        .catch(error => {
          console.error('Error:', error);
        });

这是一个成功的 post 请求，我可以看到这个结果。

但我希望能够在数据和文件上传[=]下看到文本输入归档数据 28=] under files 在此成功结果中。我知道我正在将这些值传递给 formData ，我这样做是因为我想让 text input data 以某种方式显示在结果中.我该如何实施？如果我在这里做错了什么，请指导我。感谢您的帮助。

Answer 1

必须对 HTTP 请求正文进行编码以某种方式。然后服务器端代码必须对其进行解码。

从您的评论中我们可以推断，如果您将正文编码为 JSON，那么它将对其进行解码并将其放入 data。如果您将其编码为多部分，那么它将对其进行解码并将文件放入 files 并将其余数据放入 forms.

如果您希望它将其余数据放入 data，那么您需要更改服务器端代码。

我只是从 form 自己那里读到的。

如何使用fetch API将上传的文件（图片，pdf）和JSON数据同时传到后端？

How to pass uploaded files(images, pdf) and JSON data to the backend at the same time using fetch API?

javascript

reactjs

fetch-api