有没有办法使用 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 将图像文件发送到节点，但这对我来说似乎很奇怪。有办法吗？
这是我让它正常工作的方式。我不得不使用一个叫做 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
});
};}
这里需要注意的重要部分是：
希望这会有所帮助，这解决了我尝试向后端提交图像时遇到的所有问题（在我的情况下是休息服务 - 通过电话后）。
是的，您必须在 axios 请求中设置内容类型：
axios.put(url, imageFile, {
headers: {
'Content-Type': imageFile.type
}
});
哪里imageFile是HTML5 文件对象，在您的情况下应该是图像。
这是我如何实施它：
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
}, ...
}
使用 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
}})
}
我想说，您可以为此使用一个名为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 repo。我已经在 django 中实现了这个，但我不认为后端应该是一个问题，你可以使用 node