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*100pxdiv>
                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) {
            const isLt1M = file.size / 1024 / 1024
            if (isLt1M > 1) {
                this.$message.error('上传头像图片大小不能超过1MB')
            }
            return isLt1M
        },