Vue中实现文件上传

背景

为工具网 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;
        }
    });
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cwl_Java

3分钟快速阅读-《Effective Java》(五)

10420
来自专栏中科院渣渣博肆僧一枚

相对路径和绝对路径

根目录下有demo1和images/1.jpg,demo1下有index1.html文件和demo1.1文件夹。demo1.1下有index2.html和2.j...

6110
来自专栏橙子探索测试

Jmeter+ForEach控制器+BeanShell PostProcessor爬取链家网信息储存csv

1、正则提取器+ForEach控制器+BeanShell PostProcessor后置处理器+BeanShell 取样器,爬取网站信息并写入到csv中

9910
来自专栏CU技术社区

指南:使用Keras和TensorFlow探索数据增强

数据扩充使模型对较小的变化更鲁棒,因此可以防止模型过度拟合。将扩充后的数据存储在内存中既不实际也不高效,这就是Keras的Image Data Generato...

13120
来自专栏CU技术社区

Docker 入门,看这篇就够了

关于Docker的发展史,本文就不做介绍,有兴趣的小伙伴们可以查看这篇文章,挺有意思的。http://www.oschina.net/news/57838/do...

8120
来自专栏CU技术社区

3月编程语言排行榜: Powershell进入前50

TIOBE 公布了2019年3月编程语言排行榜,正如官方所说,本月的排名几乎没有任何有趣的变化,排名前十的依然是:Java, C, Python, C++, V...

7620
来自专栏cwl_Java

3分钟快速阅读-《Effective Java》(二)

6410
来自专栏cwl_Java

浅谈产品体验优化

6720
来自专栏橙子探索测试

【Jenkins篇】Win环境安装部署Jenkins(一)

JDK1.7,或者JDK1.8: Jdk下载地址如下: Windows X86: jdk-8u171-windows-i586.exe Windows X64:...

12520
来自专栏CU技术社区

关于 Linux 磁盘监控工具,这里有一些说明

需单独安装 yum install iotop 用法:iotop -d 1 -o

8110

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励