Vue中实现文件上传
无道
2019-07-12
0 条评论
NodeJs
阅读1648
手机阅读
背景
为工具网 https://tool.misiyu.cn/qrcode 增加二维码上传识别功能。
需要用到上传功能,其实以前是学过Vue中上传文件功能的,但时间久远,忘了。
这次特此记录一下。
表单
需要一个Input type为file类型
表单中,可以看到,我们使用了onchange
事件(Vue中是@change)。
也就是说:当用户选择了,或者取消选择了文件该事件都会触发。
Vue中
在vue(js)中,我们需要用到FormData
对象。
let form = new FormData();
然后在FormData
实例中append
一个“文件对象",姑且叫他文件对象吧,具体小弟才疏学浅,不知道叫什么。
form.append('qr_image', img.files[0]);
上面的img
是什么呢?
其实就是通过document.getElementById()
或者document.querySelector()
获得的dom对象。
但是,既然我们是在使用Vue,那么我们可以用他提供的this.$refs.xxxx,这会是一样的效果。
上面的xxxx是什么呢? 就是Input中的ref属性的值而已。
如下图:
然后我们构造axios
的options:
let options = {
url: 'api/qrcode/parse',
data: form,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
}
};
url是地址
data就是之前的FormData的实例
headers中需要添加Content-Type。必须,因为这是模拟表单提交。
然后使用axios发送:
this.parse_msg = '';
axios(options).then((res) => {// do somethings});
完整代码参考
let img = this.$refs.input_img;
let form = new FormData();
// console.log(img.files[0]);
if (img.files[0] !== undefined) {
form.append('qr_image', img.files[0]);
let options = {
url: 'api/qrcode/parse',
data: form,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
}
};
this.parse_msg = '';
axios(options).then((res) => {
if (res.data.status === 0) {
swal({
text: res.data.msg,
icon: 'error'
})
} else {
this.parse_msg = res.data.msg;
}
});
}
全文完 [
支付宝打赏
微信打赏
]
有帮助?打赏


非特殊说明,本博所有文章均为博主原创。如若转载,请注明出处:https://misiyu.cn/article/41.html
这篇文章还没有评论呢~
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生社会人,一个儿子~ 愿你我都被世界温暖以待
最新评论
点击排行
随机标签