关于el-upload的图片上传组件的使用详解

该组件可以实现两种上传：

1. 使用组件自带的上传，上传的接口是写在标签属性action中的；
2. 自定义上传，在on-change的回调方法中用写接口的形式像后端发送请求，如下；

 :on-change="onChangeUpload"

用action自动上传默认给后端传的是file 格式，但我们需要给后端传base64格式的字符串；所以使用自定义上传。

需要注意的组件中几个属性
action：填写上传图片接口如果用base64方法传给后端留空就行了
on-remove：删除图片回调
on-change：图片上传回调

代码如下

uploadImage(file) {
      this.file = file.raw;
      if (file.size > 16777216) {//限制文件的大小
        this.$Message.error(file.name + '大小超过16M!');
        this.file = null //超过大小将文件清空
      }else{
        //读取文件的字符流
        const reader = new FileReader();
        //将文件读取为 DataURL 以data:开头的字符串
        reader.readAsDataURL(this.file);
        reader.onload = e => {
          // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
          const code = e.target.result;
          this.form.cover = code;
        }
      }
      return false;
    },

 记得在取到编码字符串后像后端发送请求。

参考文章：

vue页面el-upload组件实现以base64编码上传图片 - 灰信网（软件开发博客聚合）

Element el-upload 图片传 base64 - 简书

el-upload怎么拿到上传的图片的base64格式 - 走看看