你如何使用 Axios 将图像发送到节点 js？

Question

有没有办法使用 axios 将图像数组（或单个图像）发送到节点？

我正在使用的axios代码（我在前端使用react js）：

 onFormSubmit(event){
    event.preventDefault();
    let payload = this.state;
    console.log("in onFormSubmit!!! with state: ", this.state, "and payload: ", payload);
    axios.post('/api/art', payload)
    .then(function(response){
    console.log('saved successfully')
  });

我所做的研究表明，也许没有一种支持的方法可以使用 axios 将图像文件发送到节点，但这对我来说似乎很奇怪。有办法吗？

原文由 J. Bones 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我让它正常工作的方法。我不得不使用一个名为 FormData 的对象。我使用了导入：

 import FormData from 'form-data'

当然，在此导入之前，我必须为其运行 npm install：

 npm install --save form-data

完成所有这些后，以下是我在操作中使用它的方式：

 let data = new FormData();
data.append('file', file, file.name);

return (dispatch) => {
axios.post(URL, data, {
  headers: {
    'accept': 'application/json',
    'Accept-Language': 'en-US,en;q=0.8',
    'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
  }
})
  .then((response) => {
    //handle success
  }).catch((error) => {
    //handle error
  });
};}

这里要注意的重要部分是：

1. 在数据对象传递到 axios.post 调用后，我将一些标头作为配置对象包含在内。您在此处包括的内容类型是关键。您提交的是 multipart/form-data 内容类型。
2. 在该内容类型标头中，我还添加了一个边界，它源自您之前创建的数据对象。
3. 此处使用的“文件”只是我传递给操作的文件对象。这只是我为我的对象使用的名称，您可以在这里使用任何您想要的名称。

希望这会有所帮助，这解决了我在尝试将图像提交到后端时遇到的所有问题（在我的例子中是休息服务 - 通过邮寄）。

原文由 Cmontalvo80 发布，翻译遵循 CC BY-SA 4.0 许可协议