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

Question

有没有办法使用axios将一组图像(或单个图像)发送到节点？

我正在使用的axios代码(我在前端使用了反应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将图像文件发送到节点,但这对我来说似乎很奇怪.有办法吗？

Answer 1

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

import FormData from 'form-data'

当然在此导入之前我必须为它运行npm安装:

npm install --save form-data

一旦我完成了所有这些,这就是我在我的行动中使用它的方式:

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

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调用之后,我将一些头文件作为配置对象包含在内.您在此处包含的内容类型是关键.您正在提交多部分/表单数据内容类型.
2. 在该Content类型标题中,我还添加了一个边界,该边界是从您之前创建的数据对象派生的.
3. 这里使用的'文件'只是我传递给我的动作的文件对象.它只是我用于对象的名称,你可以在这里使用你想要的任何东西.

希望这会有所帮助,这可以解决我尝试将图像提交到后端的所有问题(在我的情况下是一个休息服务 - 通过邮件调用).

Answer 2

是的,您必须在axios请求中设置内容类型:

axios.put(url, imageFile, {
  headers: {
    'Content-Type': imageFile.type
  }
});

imageFileHTML5文件(https://developer.mozilla.org/en/docs/Web/API/File)在哪里,在您的情况下应该是一个图像.

Answer 3

使用 HTML5，您可以使用构建一组键/值对来表示 要发送的表单字段及其值。在大多数情况下，如在用户提交一个表单，该方法在使用时可被操作在其2种形式：FormData() FormData.set()

此方法有两个版本：两个和三个参数版本：

formData.set(name, value);

formData.set(name, value, filename);

构建数据对象后，不要忘记为 HTTP POST 请求指定多部分内容类型标头，以便可以将文件发送到服务器。

以下是我所说的摘要：

onFormSubmit(event){
    let formData = new FormData(); // instantiate it
    // suppose you have your file ready
    formData.set('file', yourFile);
    // add some data you collected from the input fields
    formData.set('data1', dataInputField1); // suppose you got dataInputField1 from your HTML5 form input
    axios.post('/api/art', formData, {
      headers: {
       'content-type': 'multipart/form-data' // do not forget this 
      }})
  }

Answer 4

这是我的实现方式：

onFormSubmit(event){
    var form = new FormData();
    files.forEach(file => {
        form.append(file.name, file);
    });
    form.append('foo', 'bar');
    axios.post('/api/art', form)    
}); 

在节点js服务器上，确保使用一些可处理多部分请求的中间件。我用了multer。

这是我在端点上的结果：

req.body - { foo: 'bar' }
req.files - { 
    'r1.jpg': { 
      fieldname: 'r1.jpg',
      originalname: 'r1.jpg',
      name: 'e2f4b9874fd7d6115b9f7440b9ead3a0.jpg',
      encoding: '7bit',
      mimetype: 'image/jpeg',
      path: '/tmp/e2f4b9874fd7d6115b9f7440b9ead3a0.jpg',
      extension: 'jpg',
      size: 45641,
      truncated: false,
      buffer: null 
    }, ...
}

Answer 5

我想说，您可以使用一个名为“react-dropzone”的库来代替手动执行此操作。所以基本上你需要做的是：-

import React,{Component} from 'react';
import Dropzone from 'react-dropzone';
import request from 'superagent';

class DropZone extends Component{

  onDrop(files){
    var file = new FormData();
    file.append('name',files[0])
    var req=request
              .post('http://localhost:8000/api/v0/image/')
              .send(file);
    req.end(function(err,response){
        console.log("upload done!!!!!");
    });
  }

  render(){
    return(
      <div>
        <Dropzone onDrop={this.onDrop}>
          <div>Try dropping some files here, or click to select files to upload.</div>
        </Dropzone>
      </div>
          );
  }
}

您可以在此处查看git 存储库。我已经在 django 中实现了这个，但我认为后端不应该是一个问题，你可以使用节点