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

Question

在将一个或多个文件（pdf、doc、xls、txt ...）存储在组件状态后，我尝试使用挂钩将它们发送到 API。这些文件与文件“类型”一起保存，类似于以下内容：

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

我曾尝试使用 formData 发送文件，但在尝试执行 POST 请求时出现错误 402 {"status": "fail", "data": [{"files": “文件字段是必需的。”}] }

这就是我正在尝试的：

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

添加到 headers Content-Type multipart/form-data,

axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Answer 2

let headers = {
        Authorization: token,
       "Content-Type": "application/json",
    };

Answer 3

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

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

How to send one or more files to an API using axios in React js?

javascript

reactjs

post

axios

form-data