element实现图片上传 --- el-upload

使用elementUI的el-upload组件实现图片上传。
效果：

点击选择图片

想要更换图片时，再次点击图片，选择另一张图片，选择图片之后会直接将原来的替换，没有其他多余效果。

实现代码：
html页面：

		<el-form-item label="上传图片" required>
                <el-upload
                    class="avatar-uploader"
                    action="/api/file/upload"
                    :show-file-list="false"
                    :data="fileData"
                    :headers="headers"
                    :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>
                    <div slot="tip" class="el-upload__tip">建议尺寸：200*100px</div>
                </el-upload>
            </el-form-item>

参数：

			fileData: {   // 接口需要的额外参数
                category: 12
            },
            headers: {  // 请求头部参数
                accessToken: ''
            },

方法：

		// 图片上传成功的操作
	    handleAvatarSuccess(res, file) {
            if (res.msgCode === 200) {
                this.imageUrl = URL.createObjectURL(file.raw)
            } else {
                this.$message.error(res.msgContent)
            }
        },
        // 图片上传前的判断
        beforeAvatarUpload(file) {
        	let imgType = ['jpg','jpeg','png']
	        let judge = false // 后缀
	        let type = file.name.split('.')[file.name.split('.').length - 1]
	        for (let k = 0; k < imgType.length; k++) {
	          if (imgType[k].toUpperCase() === type.toUpperCase()) {
	            judge = true
	            break
	          }
	        }
	        // 验证图片格式
	        if (!judge) {
	          this.$message.error('图片格式只支持：JPG、JPEG、PNG')
	          return false
	        }
            const isLt1M = file.size / 1024 / 1024
            if (isLt1M > 1) {
                this.$message.error('上传头像图片大小不能超过1MB')
                return false
            }
            return true
        },