提交时文件上传为空

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

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

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

};

Answer 2

通过将文件转换为 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');
  });

提交时文件上传为空

File Upload empty on submit

javascript

file-upload

multipartform-data

reactjs

axios