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

  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格式 - 走看看

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐