前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue中实现文件上传

Vue中实现文件上传

作者头像
无道
发布2019-11-12 16:19:21
2.9K0
发布2019-11-12 16:19:21
举报
文章被收录于专栏:无道编程

背景

为工具网 https://tool.misiyu.cn/qrcode 增加二维码上传识别功能。

二维码识别
二维码识别

需要用到上传功能,其实以前是学过Vue中上传文件功能的,但时间久远,忘了。

这次特此记录一下。

表单

需要一个Input type为file类型

input的file类型
input的file类型

表单中,可以看到,我们使用了onchange事件(Vue中是@change)。

也就是说:当用户选择了,或者取消选择了文件该事件都会触发。

Vue中

在vue(js)中,我们需要用到FormData对象。

代码语言:javascript
复制
let form = new FormData();

然后在FormData实例中append一个“文件对象",姑且叫他文件对象吧,具体小弟才疏学浅,不知道叫什么。

代码语言:javascript
复制
form.append('qr_image', img.files[0]);

上面的img是什么呢?

其实就是通过document.getElementById()或者document.querySelector()获得的dom对象。

但是,既然我们是在使用Vue,那么我们可以用他提供的this.$refs.xxxx,这会是一样的效果。

上面的xxxx是什么呢? 就是Input中的ref属性的值而已。

如下图:

表单中的ref属性
表单中的ref属性

然后我们构造axios的options:

代码语言:javascript
复制
let options = {
    url: 'api/qrcode/parse',
    data: form,
    method: 'post',
    headers: {
        'Content-Type': 'multipart/form-data'
    }
};

url是地址 data就是之前的FormData的实例 headers中需要添加Content-Type。必须,因为这是模拟表单提交。

然后使用axios发送:

代码语言:javascript
复制
this.parse_msg = '';
axios(options).then((res) => {// do somethings});

完整代码参考

代码语言:javascript
复制
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;
        }
    });
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 表单
  • Vue中
  • 完整代码参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档