如何从 VueJs 提交 "multipart/form-data"
how to submit "multipart/form-data" from VueJs
我在前端使用 VueJs / axios,在 nodejs 中使用 multer 来进行简单的文件上传。
到目前为止所有尝试都没有成功。
虽然这可以使用 ng-upload 和其他类似插件以 angular 1/2 的 100 种方式实现。但是 VueJs 似乎缺少这个基本功能。
根据我的研究,axios 不支持 "multipart/form-data"。参考 https://github.com/mzabriskie/axios/issues/789 .
multer 和其他 nodejs 库似乎可以从 angular 1/2 无缝地与 "multipart/form-data" 一起使用。但是,相同的功能在 VueJs 中不起作用。
除了支持 "multipart/form-data" aka -- WebKitFormBoundary 的 axios 之外,还有其他选择吗??
非常感谢
你可以使用 FormData,这很简单。
举个例子:
// html
<button ref="uploadBtn" @onChange="upload">Upload Files</button>
// js
methods: {
upload () {
let files = this.$refs.uploadBtn.files
let formData = new FormData()
// if you want to upload multiple files at once loop
// through the array of files
formData.append('attachment', files[0])
axios.post(url, formData).then(response => ...)
}
}
这应该可以解决问题,您真的不需要第 3 方插件。
我在 VueJs 中找到了两种实现此目的的方法。可能还有更多。
选项 1. 使用 Axios。基于以上 Bert Evans 的回答
const formData = new FormData();
formData.append("file", _file);
formData.append("id", 7878);
axios.post("/api/uploadFile", formData)
.then(function (result) {
console.log(result);
}, function (error) {
console.log(error);
});
选项 2. 使用本机 XMLHttpRequest()`
var formData = new FormData();
formData.append("file", _file);
formData.append("id", 7878);
var request = new XMLHttpRequest();
request.open("POST", "/api/uploadFile");
request.send(formData);
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200 && request.statusText === 'OK') {
console.log('successful');
} else {
console.log('failed');
}
}
}
FormData() 浏览器支持的一个有趣点在这里 caniuseFormData
对于那些像我一样尝试使用 content-type = "multipart/form-data" 和 axios 的人。它不会工作。
我也遇到了一个问题,我必须连同图像一起发送一些其他信息。我想分享我所做的。
我正在尝试上传图片、种类、名称和 eventID。
let logo1 = new FormData
logo1.append('image', this.logo1)
logo1.append('kind', 'logo1')
logo1.append('name', this.$refs.logo1.files[0].name )
logo1.append('eventID',eventID)
axios.post(`/upload`, logo1,
{
headers:{
'Authorization' : `${token}`,
'Content-Type': `multipart/form-data; boundary=${logo1._boundary}`
},
}).then((res) => {
console.log(res)
}).catch((error) => {
console.log(error)
})
注意:postdata 参数格式应该是 (url , FormData) 而不是 (url , {数据: FormData})
我在前端使用 VueJs / axios,在 nodejs 中使用 multer 来进行简单的文件上传。
到目前为止所有尝试都没有成功。 虽然这可以使用 ng-upload 和其他类似插件以 angular 1/2 的 100 种方式实现。但是 VueJs 似乎缺少这个基本功能。 根据我的研究,axios 不支持 "multipart/form-data"。参考 https://github.com/mzabriskie/axios/issues/789 .
multer 和其他 nodejs 库似乎可以从 angular 1/2 无缝地与 "multipart/form-data" 一起使用。但是,相同的功能在 VueJs 中不起作用。
除了支持 "multipart/form-data" aka -- WebKitFormBoundary 的 axios 之外,还有其他选择吗??
非常感谢
你可以使用 FormData,这很简单。
举个例子:
// html
<button ref="uploadBtn" @onChange="upload">Upload Files</button>
// js
methods: {
upload () {
let files = this.$refs.uploadBtn.files
let formData = new FormData()
// if you want to upload multiple files at once loop
// through the array of files
formData.append('attachment', files[0])
axios.post(url, formData).then(response => ...)
}
}
这应该可以解决问题,您真的不需要第 3 方插件。
我在 VueJs 中找到了两种实现此目的的方法。可能还有更多。
选项 1. 使用 Axios。基于以上 Bert Evans 的回答
const formData = new FormData();
formData.append("file", _file);
formData.append("id", 7878);
axios.post("/api/uploadFile", formData)
.then(function (result) {
console.log(result);
}, function (error) {
console.log(error);
});
选项 2. 使用本机 XMLHttpRequest()`
var formData = new FormData();
formData.append("file", _file);
formData.append("id", 7878);
var request = new XMLHttpRequest();
request.open("POST", "/api/uploadFile");
request.send(formData);
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200 && request.statusText === 'OK') {
console.log('successful');
} else {
console.log('failed');
}
}
}
FormData() 浏览器支持的一个有趣点在这里 caniuseFormData
对于那些像我一样尝试使用 content-type = "multipart/form-data" 和 axios 的人。它不会工作。
我也遇到了一个问题,我必须连同图像一起发送一些其他信息。我想分享我所做的。 我正在尝试上传图片、种类、名称和 eventID。
let logo1 = new FormData
logo1.append('image', this.logo1)
logo1.append('kind', 'logo1')
logo1.append('name', this.$refs.logo1.files[0].name )
logo1.append('eventID',eventID)
axios.post(`/upload`, logo1,
{
headers:{
'Authorization' : `${token}`,
'Content-Type': `multipart/form-data; boundary=${logo1._boundary}`
},
}).then((res) => {
console.log(res)
}).catch((error) => {
console.log(error)
})
注意:postdata 参数格式应该是 (url , FormData) 而不是 (url , {数据: FormData})