有没有办法使用 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 将图像文件发送到节点的方式，但这对我来说似乎很奇怪。有什么办法吗？
【问题讨论】：
标签： javascript node.js express reactjs 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
});
};}
这里需要注意的重要部分是：
希望这会有所帮助，这解决了我在尝试将图像提交到后端时遇到的所有问题（在我的情况下是一个休息服务 - 通过邮寄电话）。
【讨论】：
file.name 而不是file.fileName
$_FILES 变量，猜猜看！我使用的是axios.post('file', {file: myFormData}} 而不是axios.post('file', myFormData)。这可能会为某人节省一些时间
是的，您必须在 axios 请求中设置内容类型：
axios.put(url, imageFile, {
headers: {
'Content-Type': imageFile.type
}
});
其中imageFile 是HTML5 file object，在您的情况下应该是图像。
【讨论】：
这是我的实现方式：
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，您可以使用 FormData() 构造一组键/值对，表示您要发送的表单字段及其值。在大多数情况下，就像用户提交表单一样，要使用的方法是FormData.set()，它可以是manipulated，有两种形式：
这个方法有两个版本：一个二和一个三参数 版本：
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>
);
}
}
您可以查看here 以获取 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(...)
不仅是图片，我们还可以使用完全相同的程序上传视频。
【讨论】：