问题描述
我在前端使用VueJs/axios,在nodejs中使用multer,以使简单的文件上传正常工作.
I am using VueJs / axios in frontend and multer in nodejs for a simple file upload to work.
到目前为止,所有尝试均未成功.尽管可以使用ng-upload和其他类似插件以角度1/2的方式以100种方式实现.但是VueJs似乎缺少此基本功能.根据我的研究,axios不支持"multipart/form-data".引用 https://github.com/mzabriskie/axios/issues/789 .
So far all tries has been unsuccessful.While this can be achieved in 100 ways in angular 1/2 using ng-upload and other similar plugins. But VueJs seems to be lacking this basic functionality.Based on my research axios doesnt support "multipart/form-data". Ref https://github.com/mzabriskie/axios/issues/789 .
multer和其他nodejs库似乎可以从1/2角度无缝处理"multipart/form-data".但是,VueJ无法使用相同的功能.
multer and other nodejs libraries seems to work with "multipart/form-data" seamlessly from angular 1/2. However same functionality is not working from VueJs.
除了axios之外,还有其他替代方法可以支持"multipart/form-data"吗?WebKitFormBoundary ??
Is there any other alternative other than axios which support "multipart/form-data" aka -- WebKitFormBoundary ??
非常感谢
推荐答案
我在VueJs中找到了两种实现此目的的方法.可能还有更多.
I found two ways of achieving this in VueJs. There might be more.
选项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
An interesting point of FormData() browser support here caniuseFormData
对于那些像我这样尝试使其与axios一起使用content-type ="multipart/form-data"的人也是如此.它不会工作.
Also for those trying like me to make it work with content-type = "multipart/form-data" with axios. It won't work.
这篇关于如何提交“多部分/表单数据"来自VueJs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!