你怎么用Axios发送图像到节点js?

有没有办法发送图像(或单个图像)的数组使用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的节点,但这对我来说似乎很奇怪。 有没有办法?

是的,您将不得不在axios请求中设置内容types:

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

其中imageFile是一个HTML5文件( https://developer.mozilla.org/en/docs/Web/API/File )应该是你的情况下的图像。

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

 import FormData from 'form-data' 

当然,在导入之前,我必须运行npm install:

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

希望这有助于解决所有的问题,我试图提交一个图像到后端(在我的情况下,一个rest服务 – 通过后通话)。

我会说,而不是手动这样做,你可以使用一个名为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实现了这个,但我不认为后端应该是一个问题,你可以使用节点

这是我如何实现它:

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

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

这是我在终结点上的结果:

 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 }, ... }