Vue项目使用ElementUI实现的图片上传并回显功能

实现上传的功能图片，点击图片可以更换图片，废话不多说，上代码。。。

<-- HTML部分 -->
    <el-upload
    class="img-uploader"
    :action="http +'/saas-com/upload/upload'"
    :show-file-list="false"
    name='file'
    :on-success="handleQrSuccess"
    :before-upload="beforelogoUpload">
        <img v-if="qrUrl" :src="qrUrl" class="avatar"/>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
<-- script部分 -->
    data() {
        return {
            http:'http://120.45.555.117:8159',
            qrUrl:'',
        };
    },
    methods: {
        // 营业执照上传成功函数
        handleQrSuccess(res, file) {
            if(res.code == 200){
                this.$message({
                    message:'上传营业执照成功',
                    type:'success',
                })
                console.log(res)
                this.AddData.id = res.data[0].id;
                this.qrUrl = this.http + '/saas-com/upload/imageupload?FileNames=' +         res.data[0].fileName;
            }else{
                this.$message({
                    message:'上传营业执照失败,请重新上传!',
                    type:'error'
                })
            }
        },
        // 营业执照图片格式认证
        beforelogoUpload(file) {
            var types = [
                "image/jpeg",
                "image/png", 
                "image/jpg"
            ];
            const isImg = types.indexOf(file.type) == -1;
            const isLt3M = file.size / 1024 / 1024 /1024 < 3;
            if (isImg) {
                this.$message.error("上传营业执照图片只能是 JPG PNG JPEG 格式!");
            }
            if (!isLt3M) {
                this.$message.error("上传营业执照图片大小不能超过 3MB!");
            }
            return !isImg && isLt3M;
        },
    },
<-- css样式 -->
<style lang="less" scoped>
// 上传营业执照图片样式开始
.img-uploader{
    width: 80px;
    height: 106px;
}
.img-uploader .el-upload {
    width: 80px;
    height: 106px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.img-uploader .el-upload:hover {
    border-color: #409eff;
}
[class*=" avatar-uploader-icon"], [class^=avatar-uploader-icon]{
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 106px;
    line-height: 106px;
    text-align: center;
}
.avatar {
    width: 80px;
    height: 106px;
    display: block;
}
// 上传营业执照图片样式结束
</style>

亲测有效，感觉有用的XDM点赞收藏！有不懂的可以评论区留言