Vue中实现文件上传

• 2019 年 11 月 12 日
• 笔记

背景

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