基于vue+element做图片的上传功能（二）

1.利用element中的upload的上传功能，由于项目需求只能上传传一张图片，所以就用了用户头像上传这个方法

详情看element网站：https://element.eleme.cn/2.0/#/zh-CN/component/upload

2.去网站上直接将代码拷贝下来，前提是element可以使用。

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/" //上传的地址
  :show-file-list="false"
  :on-success="handleAvatarSuccess" // 上传成功执行的方法
  :before-upload="beforeAvatarUpload"> // 上传前执行的方法
  <img v-if="imageUrl" :src="imageUrl" class="avatar"> // 回显查看
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

data中的数据：

data() {
  return {
       imageUrl: '',
       formData: {
         imageUrl: '', //提交给后台的地址
       }
   }            
}

methods方法：

handleAvatarSuccessThree(res, file) {
   this.imageUrl = URL.createObjectURL(file.raw);
   this.formData.imageUrl = res[0].newFileName;
   this.$message({ //上传成功返回的消息
      type: 'success',
      showClose: true,
      message: res[0].info
   })
},

beforeAvatarUpload(file) { // 上传前的方法，限制上传的大小，还有格式，我这边没有限制

    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!');
    }
    return isLt2M;
}

这样就可以上传成功了，由于我这个是上传一张，上传一张会将原来的图片替换掉，没有做删除功能。

欢迎大家不吝赐教！