javascript - 如何在 React js 中使用 axios 将一个或多个文件发送到 API？

Question

我正在尝试使用 Hook 将一个或多个文件(pdf、doc、xls、txt ...)存储在组件状态后发送到 API。 这些文件与文件“类型”一起保存，如下所示:

状态对象由文件名(键)组成，其键内是文件(使用react-dropzone添加)和文件类型(数字)

我尝试使用 formData 发送文件，但在尝试执行 POST 请求时出现错误 402 {"status": "fail", "data": [{"files": "The files field is required ."}] }

这就是我正在尝试的:

const [files, setFiles] = useState({});

const sendFiles = () =>{

    let headers = {
        Authorization: token
    };

    let data = new FormData();
    
    //files is my state
    for(let key in files){
      data.append(key, files[key])
    }

axios
    .post(
        "/some-url/new-files",
        {
          report_id:6, //This is necessary
          
          files: data
        },
        { headers }
    )
    .then(response => {
        let { data } = response.data;
        console.log(data);
      
    })
    .catch(error => {
        console.log(error)
    });
  }



}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

 let headers = {
        Authorization: "token",
        'Content-Type':'multipart/form-data'
    };

let formData = new FormData();

 for(let key in files){
 
  formData.append('files[][file]', files[key].file, files[key].file.name)
  formData.append('files[][file_type_id]', files[key].fileType)
}

axios
    .post(
        "/api/files",
       formData,
        { headers }
    )
    .then(()=>{console.log('It Works')})