Element UI Upload 组件上传图片可删除、预览功能

 更新时间:2023年11月15日 14:55:48   作者:Min_nna  
这篇文章主要介绍了Element UI Upload 组件 上传图片可删除、预览,设置只允许上传单张 / 多张图片的操作,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

Element UI Upload 组件 上传图片可删除、预览;设置只允许上传单张 / 多张图片的操作

效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

上传图片单张图片,可删除、预览 完整代码

如果不上传单张图片,可以把 :limit=“1” 删除,把单张图片操作步骤删除就是多张图片上传咯!

html部分

<el-form-item label="头像" prop="csAvatar">
      <el-upload action="aaa" list-type="picture-card" :class="{ disabled: uploadDisabled }"
      :auto-upload="false" :limit="1" ref="upload" :on-change="handleChange" :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove" :file-list="fileList">
        <i class="el-icon-plus"></i>
      </el-upload>
      <!-- 预览图片 -->
      <el-dialog :visible.sync="dialogVisibleimg" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
</el-form-item>

javascript

data(){
	return {
	   dialogVisibleimg: false,
	   dialogImageUrl: "",
	   formdata: new FormData(),
	   fileList: [],
	   addimg: [],
	   removeimg: [],
	   ruleForm: {
          csAvatar: "",
       }
	},
	methods:{
		// 添加活动展示照片
		handleChange(file, fileList) {
		  const isJPG =file.raw.type === "image/jpeg" || file.raw.type === "image/png";
		  const isLt5M = file.size / 1024 / 1024 < 5;
		  if (!isJPG) {
		    this.$message.error("上传头像图片只能是 JPG 、png 格式!");
		    fileList.splice(-1, 1);//移除错误文件
		    return false;
		  }
		  if (!isLt5M) {
		    this.$message.error("上传头像图片大小不能超过 5MB!");
		    fileList.splice(-1, 1);
		    return false;
		  }
		  this.addimg = fileList[0].raw;
		  this.ruleForm.csAvatar = this.addimg;
		},
		// 删除活动展示照片
		handleRemove(file, fileList) {
		  console.log(fileList)
		  this.ruleForm.csAvatar = '';
		  this.formdata = new FormData();
		},
		// 活动展示照片预览
		handlePictureCardPreview(file) {
		  this.dialogImageUrl = file.url;
		  this.dialogVisibleimg = true;
		},
		// 渲染编辑获取id
	    apply() {
	      this.fileList = [{ url: "" }];//这里是踩坑的点,必须写
	      this.fileList[0].url = res.data.csAvatar;//这里是调用接口获取到的值 res.data.csAvatar,赋值就可以回显了
	      //this.fileList[0].url 做的是单张图片回显,多张图片回显可以去掉[0]
	    },
	    // 提交上传按钮
	    submitForm(formName) {
	      this.$refs[formName].validate((valid) => {
	        if (valid) {
	          this.formdata = new FormData();
	          if(this.ruleForm.csAvatar){//新增
	            this.formdata.append("picture", this.ruleForm.csAvatar);//上传图片要把参数和值放在FormData里
	            //如果有其他参数,也要一并放在this.formdata里
	           /* 例:
	            this.formdata.append("csLevel", this.ruleForm.serviceLevel);
          		this.formdata.append("csMaximum", this.ruleForm.size);
          		*/
	          }
	          //上传图片的接口(重要看传参部分怎么传参)
            CustomerServiceController.add(this, this.formdata)//传参直接传this.formdata即可
              .then((res) => {
                if (res.success == true) {
                  this.$message.success("新建成功");
                } else {
                  this.$message.error("新建失败");
                }
              })
              .catch((e) => {});
	        } else {
	          console.log("error submit!!");
	          return false;
	        }
	      });
	    },
	},
	computed: {
	    uploadDisabled: function () {
	      console.log(this.ruleForm.csAvatar)
	      return this.ruleForm.csAvatar !='';
	    },
	},
}

css

.disabled{
    .el-upload--picture-card{
      display: none;
    }
  }

Element UI Upload 组件 设置只允许上传单张图片的操作

只要在检测到上传列表中已经有一张图片时,就隐藏上传组件,只展示上传列表。

那么就可以给整个上传组件一个class名称,这个class没有任何样式,只是做选择器用。
比如:disabled
那么就在监测到上传一张后,隐藏disabled 下面的 el-upload–picture-card

js:

computed: {
     uploadDisabled:function() {
        return this.imagelist.length >0    
     },  
},

css:

.disabled .el-upload--picture-card {
	display: none;
}

uploadDiseabled 会根据上传列表的长度动态的给upload的组件添加样式,进而将达到只上传一张的效果。然后这个方法也可以用于限制上传张数。

到此这篇关于Element UI Upload 组件 上传图片可删除、预览;设置只允许上传单张 / 多张图片的操作的文章就介绍到这了,更多相关Element UI Upload 组件上传图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 记一次vue去除#问题处理经过小结

    记一次vue去除#问题处理经过小结

    这篇文章主要介绍了vue去除#问题处理经过,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue结合原生js实现自定义组件自动生成示例

    Vue结合原生js实现自定义组件自动生成示例

    这篇文章主要介绍了Vue结合原生js实现自定义组件自动生成示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 浅析vue中的组件传值

    浅析vue中的组件传值

    这篇文章主要介绍了浅析vue中的组件传值,文章基于vue的相关资料展开对主题的详细介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04
  • vant-List-@load事件一直触发的解决

    vant-List-@load事件一直触发的解决

    这篇文章主要介绍了vant-List-@load事件一直触发的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue 实现 rem 布局或vw 布局的方法

    vue 实现 rem 布局或vw 布局的方法

    这篇文章主要介绍了vue 实现 rem 布局的 或者 vw 布局的方法,本文给提供多种方法,需要的朋友可以参考下
    2019-11-11
  • Vue3使用el-table组件实现分页、多选以及回显功能

    Vue3使用el-table组件实现分页、多选以及回显功能

    这篇文章主要介绍了Vue3使用el-table组件实现分页、多选以及回显功能,文中通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-09-09
  • Vue项目中对index.html中BASE_URL的配置方式

    Vue项目中对index.html中BASE_URL的配置方式

    这篇文章主要介绍了Vue项目中对index.html中BASE_URL的配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue3配置axios跨域实现过程解析

    Vue3配置axios跨域实现过程解析

    这篇文章主要介绍了Vue3配置axios跨域实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • Vue3中watch的用法与最佳实践指南

    Vue3中watch的用法与最佳实践指南

    这篇文章主要给大家介绍了关于Vue3中watch用法与最佳实践的相关资料,watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法,可以通过watch动态改变关联的状态,需要的朋友可以参考下
    2021-07-07
  • Vue中Mixin&extends的详细使用教程

    Vue中Mixin&extends的详细使用教程

    vue提供了mixin、extends配置项,最近使用中发现很好用,下面这篇文章主要给大家介绍了关于Vue中Mixin&extends的详细使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02

最新评论