vue页面el-upload组件实现以base64编码上传图片

第一步、编写视图代码即html代码el-upload是vue的上传文件的组件
具体可百度vue组件细节就不多说了

div标签中用于展示图片
需要注意的组件中几个属性
ref：清除已上传图片的缓存的
action：填写上传图片接口如果用base64方法传给后端留空就行了
on-remove：删除图片回调
on-change：图片上传回调
第二步、编写javascript中的代码
1.清除图片缓存代码

cancel() {
      this.$refs.clearImage.clearFiles();
      this.open = false;
      this.reset();
    },

2.删除图片回调

deleteImg(index){
      this.form.cover = "";
    },

3.上传图片回调很重要 过程中将文件转换为base64编码放进要提交的到后端的值中

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;
    },

最后后端处理base64编码以url方式存储图片到数据库，然后返回url地址到前端就大功告成了。