有没有办法使用 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（名称，值）；
formData.set（名称，值，文件名）；
构建数据对象后，不要忘记为 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
我们只需要将图片上传到后端就是标题multipart/form-data、图片详细信息（uri、name、type）和表单数据。
import FormData from 'form-data'
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
const data = new FormData();
data.append('image', {
uri: image.uri,
name: image.uri.split('/').pop(), //split the uri at / and get the last element of the resulting array which actually is the name with the image extention (e.g, abc.jpg)
type: image.type // type needs to be modified. keep reading
})
现在这里有一个重要的点。很多时候，图像详细信息中的类型不是完整类型（例如，它仅返回“图像”，但实际类型是“图像/jpeg”），这会导致network error.
现在要获得准确的类型，我们可以使用一些第三方包来做到这一点。
例如，我们可以使用mime.
import mime from 'mime'
type: mime.getType(image.uri)
最后，我们只需要发送请求。
axios.post('url', data, config)
.then(...)
.catch(...)
不仅是图像，我们还可以使用完全相同的程序上传视频。