使用 axios 和 React 将图像上传到 Strapi / 上传

Question

首先让我说，我知道有很多重复，但是 Strapi 发生了一些变化，或者我遗漏了一些明显的东西。

Strapi 版本：v3.4.6

目标是通过 /upload 端点（或任何其他自定义端点，如果它使生活更轻松）上传图像或 .zip 文件。 这就是我现在所拥有的：

输入元素：

<input
   type="file"
   name="files"
   onChange={ this.handleVPNUploadChange }
   id="icon-button-file"
/>

处理程序：

handleVPNUploadChange(event) {
  console.log( "handleVPNUploadChange", event.target.files[0])
  this.setState({
    uploadedFile: event.target.files[0]
  })
}

请求：

let formData = new FormData()

formData.append('files', uploadedFile);
console.log(uploadedFile)               //check image below
for (var pair of formData.entries()) {
  console.log(pair[0]+ ', ' + pair[1]); //check image below
} 

axios({
   method: 'post',
   url: baseUrl + 'upload',
   data: formData,
   headers: {}
})

在你开始大喊我忘记添加Content-Type: multipart/form-data header 之前，请注意我试过了，在 Strapi 端得到了这个 500 错误： bad content-type header, no multipart boundary 。 然后我在某处读到，如果您从不首先添加Content-Type header，它将自动生成边界。

我得到的当前错误是：

Answer 1

这对我有用

const imgFile = event.target.files[0];
var formData = new FormData();
formData.append('files', imgFile, imgFile.name);

axios.post(url, formData).then(res => {
  console.log(res);
}).catch(error =>{
  console.log(error.message);
});