vue+elementui上传图片

在这里插入图片描述

在这里插入图片描述

<el-upload class="avatar-uploader"
           action=""
           :show-file-list="false"
           :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload">
    <img v-if="Model.ImageUrl" :src="Model.ImageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
data: function () {
    
    
    return {
    
    
        imageUrl: ‘’,
         Model: {
    
    
     		ImageUrl: ''
 		}
    }
}
methods: {
    
    
    //上传图片
    handleAvatarSuccess(res, file) {
    
    
        console.log("imageUrl", file)
        const formData = new FormData();
        formData.append('ImageUrl-file', file.raw);
        formData.append('file_id', '0');
        var that = this;
        $.ajax({
    
    
            type: "post",
            dataType: "json",
            url: localAd + "/Upload/UploadImage",
            headers: {
    
    
                'X-Exhibitor-Token': localStorage.getItem('setExhHeader'),
            },
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
    
    
                console.log("图片返回", data);
                if (data.code == 1) {
    
    
                    that.imageUrl = data.msg;
                    that.Model.ImageUrl = data.msg;
                } else {
    
    
                    alert('图片上传失败')
                }
            }, error: function (err) {
    
    
                console.log(err);
            }
        })
    },
    beforeAvatarUpload(file) {
    
    
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
    
    
            this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isLt2M;
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_44856917/article/details/129282750