Vue+Element UI Upload 组件 上传单张图片去除后面的+号
这个思路是隐藏el-upload–picture-card”我是在钩子函数 上传中、上传成功、上传失败、预览这些地方进行控制。这样在上传中那个"+"号也可以马上隐藏上传组件代码块<el-form-item label="产品图片:" size="mini"><el-uploadaction="上传接口":limit="1":on-pr...
·
这个思路是隐藏 el-upload–picture-card”
我是在钩子函数 上传中、上传成功、上传失败、预览这些地方进行控制。这样在上传中那个"+"号也可以马上隐藏
上传组件代码块
<el-form-item label="产品图片:" size="mini">
<el-upload
action="上传接口"
:limit="1"
:on-preview="handlePictureCardPreview"
:before-upload="beforeAvatarUpload"
:on-progress="onProgress"
:on-success="imgSuccess"
:on-error="imgError"
list-type="picture-card"
:on-remove="handleRemove"
:class="{disabled:uploadDisabled}"
:file-list="fileList"
>
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">只能上传不超过4MB的图片</div>
</el-upload>
</el-form-item>
预览图片
<el-dialog :modal-append-to-body="false" :visible.sync="imgVisible" width="30%">
<img width="100%" :src="dialogImageUrl" alt="图片未找到" />
</el-dialog>
声明变量
data() {
return {
// 是否禁用上传
uploadDisabled: false,
// 是否显示预览图片
imgVisible: false,
// 预览图片url
dialogImageUrl: "",
// 上传的文件列表, 例如: [{name: 'xxx.jpg', url: 'https://xxx.com/xxx.jpg'}]
fileList: [],
submitData: {
// 产品图片
productImg: ""
}
}
}
事件
methods: {
beforeAvatarUpload(file) {
let isLt4M = file.size / 1024 / 1024 < 4;
if (!isLt4M) {
this.$message.error('上传头像图片大小不能超过 4MB!');
}
return isLt4M;
},
// 上传中
onProgress(event, file, fileList){
this.uploadDisabled = true;
},
// 图片上传成功
imgSuccess(response, file, fileList) {
this.uploadDisabled = true;
if(response.status == 0){
this.submitData.productImg = response.data;
}else if(response.status == -1){
this.submitData.productImg = "";
this.fileList = [];
this.uploadDisabled = false;
this.$message.error(response.errorMsg);
}else{
this.submitData.productImg = "";
this.fileList = [];
this.uploadDisabled = false;
this.$message.error(response.errorMsg);
}
},
// 图片上传失败
imgError(err, file, fileList){
this.$message.error("上传失败");
this.uploadDisabled = false;
},
// 预览图片
handlePictureCardPreview(e) {
this.imgVisible = true;
this.dialogImageUrl = e.target.currentSrc;
this.uploadDisabled = true;
},
// 删除图片
handleRemove(file, fileList) {
this.submitData.productImg = "";
this.uploadDisabled = false;
},
}
样式控制
<style scoped lang="">
.disabled >>> .el-upload--picture-card{
display: none;
}
</style>
第一次写博客,不足之处请提出,大佬们请多多指教!
更多推荐
已为社区贡献1条内容
所有评论(0)