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

【问题标题】：Uploading image to Strapi /upload with axios and React使用 axios 和 React 将图像上传到 Strapi /upload
【发布时间】：2021-03-31 11:01:43
【问题描述】：

首先让我说，我知道有很多重复，但是 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 标头之前，请注意，我尝试过，并在 Strapi 端收到了这个 500 错误：bad content-type header, no multipart boundary。然后我在某处读到，如果你从不首先添加 Content-Type 标头，它将自动生成边界。

我得到的当前错误是：

【问题讨论】：

标签： javascript reactjs axios strapi

【解决方案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);
});

【讨论】：