(vue)el-upload上传功能及成功后去掉上传框
·
(vue)el-upload上传功能上传功能及成功后去掉上传框


代码
<el-upload
action=".../uploadPic"
list-type="picture-card"
:class="{ hide: hideUpload }" //控制上传框显示隐藏
:on-preview="handlePictureCardPreview"
:before-upload="beforeAvatarUpload"
:file-list="imageUrlList"
:data="dataObject"
:on-change="fileChange"
:auto-upload="false"
:on-remove="uploadRemove"
accept="image/jpg, image/jpeg, image/png"
>
<i class="el-icon-plus"></i>
</el-upload>
data(){
return {
hideUpload: false, // 控制上传按钮显示隐藏
...
}
}
methods:{
handlePictureCardPreview(file) {
this.dialogVisibleImg = true;
this.form.img = file.url;
},
beforeAvatarUpload(file) {
let a = "image/jpg,image/jpeg,image/png";
const isJPG = a.indexOf(file.type) > -1;
const isLt2M = file.size / 1024 / 1024 < 500;
if (!isJPG) {
this.$Message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$Message.error("上传头像图片大小不能超过 500KB!");
}
return isJPG && isLt2M;
},
//把图片转成base64编码
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
//调用上面base64方法 将文件信息传过去
fileChange(file, fileList) {
this.hideUpload = true;
let that = this;
that.getBase64(file.raw).then((res) => {
that.form.img = res;
that.dataObject.img = res; //赋值
that.formEdit.img = res;
getKnowledgeUpload(that.dataObject).then((res) => {
console.log(res);
if (res.status == 200) {
this.$Message.success("图片上传成功");
this.hideUploadEdit = true;
} else {
this.hideUpload = false;
}
});
});
},
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)