vue element-ui之图片上传el-upload

一、组件布局部分

<el-upload
      class="avatar-uploader"
      // action提交的地址为后台转为存放图片文件的一个接口地址
      action="/api/employee/addimages"
      :headers = "headers"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
       v-model="formEdit.e_icon">
       <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

二、js的methods部分（需要注意的是，file名是固定的，为后台的文件或图片名称，不能更改）

            //    图片上传
            handleAvatarSuccess(res,file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.formEdit.e_icon = res.data[0].e_icon
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }