vue+elementui上传图片

最新推荐文章于 2024-10-31 19:26:00 发布

九点五亿少女的梦

最新推荐文章于 2024-10-31 19:26:00 发布

阅读量386

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44856917/article/details/129282750

版权

在这里插入图片描述

<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;
    }
}