vue+element-ui 的el-upload 实现图片上传

1、template代码如下
代码解析：
action为空就可以；
show-file-list 是否显示已上传文件列表
before-upload：绑定的是上传图片前要执行的方法用来限制图片的大小、格式
http-request：绑定的是上传图片的方法
img 标签里放的是上传成功后显示出来的图片
i 标签里 放的是默认未上传图片时的图标

<el-upload
          class="avatar-uploader"
          action=""
         :show-file-list="false"
         :http-request="selectPicUpload"
        :before-upload="beforeAvatarUpload"
>
 <img v-if="iconVal" width="85px" height="85px" :src="iconVal" class="avatar">
 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

2、js代码 （两个方法）

//上传图标事件
selectPicUpload(obj) {
    let fd = new FormData();  //参数的格式是formData格式的
    fd.append('uploadFile', obj.file); //参数
    this.$api.StoreDiodeUpload(fd).then(res => {
          if (res) {
                        this.iconVal =res;
                        this.message('上传成功', 1)
                    } else {
                        this.message('上传失败', -1)
                    }
     }).catch(error => {
     })
 },
//对上传图片的大小、格式进行限制
 beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isJPG2 = file.type === 'image/jpg';
    const isPNG = file.type === 'image/png';
    const isLt5M = file.size / 1024 / 1024 < 5;
     if (!isJPG && !isJPG2 && !isPNG) {
           this.$message.warning('只支持jpg或png格式图片');
     }
     if (!isLt5M) {
        this.$message.warning('请上传5MB以内的图片!');
     }
   return (isJPG || isJPG2 || isPNG) && isLt5M;
}