文件上传提交时为空

Question

我正在尝试使用对象内的 Axios 上传图像。我可以使用获取文件new FormData()并将其放入对象中，但提交的图像是空的。如何将对象中的文件与其他 JSON 数据结合起来上传？import React, { useState } from 'react';import axios from 'axios';function UploadFiles() {  const [submitFile, setSubmitFile] = useState({});  const handleChange = e => {    setSubmitFile(e.target.files[0]);  };  const handleSubmit = () => {    const formData = new FormData();    formData.append('document', submitFile);    formData.append('Answer_name', 'image');    formData.append('Document', true);    formData.append('Answer', 'Got some data');    console.log(submitData) // I get formData data    const submitData = {      UUID_Formulier: '117F994F-F803-7249-91E9-EE1E7B691DFF',      answers: [formData], // this will be an empty object on calling axios.post    };    axios      .post('/submit', submitData, {        headers: {          'Content-Type': 'multipart/form-data',        },      })      .then(() => {        console.log('success');      })      .catch(() => {        console.log('failed error');      });  };  return (    <div>      <input type="file" name="image" onChange={handleChange} />      <button onClick={handleSubmit}>Submit</button>    </div>  );}图像必须放置在答案数组中。当我将 FormData 放入答案数组时，它是一个空对象。如何将文件 formData 放入 JSON 对象或数组然后提交全部？使用方括号表示法不会创建数组，而是创建字符串，如下所示。

Answer 1

通过将文件转换为 base64 字符串解决了这个问题。

function getBase64(file) {

  return new Promise(function(resolve, reject) {

    const reader = new FileReader();

    reader.onload = function() {

      resolve(reader.result);

    };

    reader.onerror = reject;

    reader.readAsDataURL(file);

  });

}

const [form, setForm] = useState([]);

const fileFound = e.target.type === 'file' && e.target.files[0];

const promise = fileFound && getBase64(fileFound);

promise.then(function(result) {

   setForm([

      ...form,

      {

         UUID_Answer: 'image_name,

         Answer: '',

         Document: true,

         Document_Upload: result,

      },

   ]);

});

const submitData = {

    UUID_Formulier: '117F994F-F803-7249-91E9-EE1E7B691DFF',

    answers: form,

  };

axios

  .post('/submit', submitData)

  .then(() => {

    console.log('success');

  })

  .catch(() => {

    console.log('failed error');

  });

Answer 2

所有数据都必须添加到 FormData 对象中，要以类似数组的形式获取数据，您可以尝试方括号表示法。

const formData = new FormData();

formData.append('UUID_Formulier', '117F994F-F803-7249-91E9-EE1E7B691DFF');

formData.append('answers[0][document]', submitFile);

formData.append('answers[0][Answer_name]', 'image');

formData.append('answers[0][Document]', true);

formData.append('answers[0][Answer]', 'Got some data'); 

console.log(formData) // I get formData data

axios

  .post('/submit', formData, {

    headers: {

      'Content-Type': 'multipart/form-data',

    },

  })

  .then(() => {

    console.log('success');

  })

  .catch(() => {

    console.log('failed error');

  });

};