vue2 upload多图片上传

dom

   <el-upload
                :class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
                class="avatar-uploader"
                ref="upload" 
                action="#"
                :limit="limitCountImg" //限制上传图片的数量
                :show-file-list="true" //列表展示
                :auto-upload="false" //点击上传
                list-type="picture-card"
                :http-request="handleHttpRequestIcon" //成功
                :on-change="imgChange" //change 
                :on-remove="handleRemove" //删除事件
                accept="image/jpg,image/jpeg,image/png"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

css

::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: rgba(255, 255, 255, 0.06);
}
::v-deep .el-upload-list__item-actions {
  width: 100px;
  height: 100px;
}
::v-deep .el-upload-list__item-thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
::v-deep .el-upload-list__item {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.06);
}
/* 上传图片时隐藏 */
::v-deep .uoloadSty .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
::v-deep .disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}

script

export default{
data(){
retutn{
      showBtnImg: true,
      noneBtnImg: false,
      limitCountImg: 1,
}

},
methods:{
  imgChange(file, fileList) {
      this.noneBtnImg = fileList.length >= this.limitCountImg;
    },
    // 处理删除事件
    handleRemove(file, fileList) {
      // "文件已被删除:", file
      // "当前文件列表:", fileList
      this.noneBtnImg = !fileList.length <= 0;
    },
    addConfirm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loadingShow = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$refs.upload.submit();
        }
      });
    },
    handleHttpRequestIcon(file) {
      httpIconRequest(file, {
        next: (response) => {
          // console.log(response);
        },
        error: (err) => {
          this.loadingShow.close();
        },
        complete: (res) => {
          this.loadingShow.close();
          this.room.room_avatar = res.key;
        },
      });
    },
}


}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/575451.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++ 核心编程(1)

c面向对象编程 1.内存分区模型 程序运行前为代码区和全局区。程序运行后才有栈区和堆区。。 1.1 程序运行前 #include<iostream> #include <bits/stdc.h> using namespace std; /*全局区全局变量、静态变量、常量 */ //全局变量 int g_1 20; int g_2 30; //const…

以场景驱动CMDB数据治理经验分享

数据治理是 CMDB 项目实施中难度最大、成本最高的环节&#xff0c;是一个长期治理的过程&#xff0c;而行业很少提出 CMDB 数据治理的技术实现方案。CMDB 数据治理不仅需要解决配置管理工程性的技术问题&#xff0c;还要基于运维组织的特点&#xff0c;建立适应性的配置运营能力…

查看HDF5文件软件(HDFView)

HDFView&#xff1a;下载地址 note&#xff1a;我们需要下载 win10 、App软件&#xff08;win10在win11也能运行&#xff09;&#xff0c;因为App软件是轻量版&#xff0c;不需要安装就可以使用。 eg&#xff1a; 下载完后解压就可以使用。

空间数据索引的利器:R-Tree原理与实现深度解析

空间数据索引的利器&#xff1a;R-Tree原理与实现深度解析 R-Tree的原理插入操作分裂操作查询操作 R-Tree的伪代码R-Tree的C语言实现讨论结论 R-Tree是一种平衡树&#xff0c;用于空间数据索引&#xff0c;特别是在二维或更高维度的几何对象存储和检索中。它由Antony Guttman和…

书生·浦语 大模型(学习笔记-9)OpenCompass 大模型评测实战

目录 一、评测实现双赢 二、评测遇到的问题 三、如何评测大模型&#xff08;大概总结4大类方法&#xff09; 四、评测工具链及流水线 五、实战评测 GPU的环境安装 查看支持的数据集和模型 启动评测(会缺少protibuf库&#xff0c;提前安装&#xff09; 测评结果 一、评…

【蓝桥2025备赛】容斥原理

容斥原理 背景&#xff1a;两个集合相交 高中的韦恩图&#xff0c;我们知道两个集合相交时我们可以通过简单的计算来认识相关的性质 集合相交的区域是 A ∩ B A\cap B A∩B ,集合的并集是 A ∪ B A\cup B A∪B ,那怎么用集合表示 A ∪ B A\cup B A∪B 我们可以看作是A集合…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-6.3

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

mybatis的使用技巧9——mysql按年、季度、月、周等不同时间维度查询或分组统计

在实际项目开发过程中&#xff0c;按不同时间维度查询业务数据的操作异常频繁。比较多的操作如支持按时间周期范围做列表数据的筛选&#xff0c;或者是按年月日等维度的图表展示&#xff0c;亦或者是首页的概况&#xff0c;三维大屏的展示等&#xff0c;都离不开不同时间周期查…

网络靶场实战-Qiling Fuzz实例分析

背景 在上一小节中&#xff0c;介绍了qiling框架的背景和基础使用&#xff0c;并以相关的CTF和qilinglab实例进行练习加深对qiling框架的使用&#xff0c;后续并简单介绍了qiling fuzz的功能。 在这一小节&#xff0c;我们将对qiling fuzz iot设备进行测试以及以实例的方式对…

中级信息系统管理工程师-必会题锦集

文章目录 中级信息系统管理工程师-必会题锦集题目一CPU[解析]试题二 CPU[解析] 中级信息系统管理工程师-必会题锦集 题目一CPU CPU中&#xff08;1&#xff09;不仅要保证指令的正确执行&#xff0c;还要能够处理异常事件。 A. 运算器 B. 控制器 C. 寄存器组 D. 内部总线 [解…

1.C++入门(上)

目录 1.C关键字 2.命名空间 作用域方面的优化 a.命名空间定义 b.命名空间使用 3.C 输入&输出 1.C关键字 C有63个关键字&#xff0c;C语言有32个关键字&#xff0c;存在重叠如荧光笔标出 2.命名空间 作用域方面的优化 如果变量&#xff0c;函数和类的名称都存在于全…

SpringBootWeb请求

文章目录 前言一、Postman介绍 二、简单参数三、实体参数四、数组集合参数五、日期参数六、JSON参数七、路径参数 前言 在上一篇文章中&#xff0c;已经基于SpringBoot的方式开发一个web应用&#xff0c;浏览器发起请求 /hello 后 &#xff0c;给浏览器返回字符串 “Hello Wor…

C++笔试强训day7

目录 1.字符串中找出连续最长的数字串 2.岛屿数量 3.拼三角 1.字符串中找出连续最长的数字串 链接 我的思路很简洁&#xff0c;就是双指针遍历&#xff0c;然后不断更新左位置left和右位置right和长度len。 然后我写代码的时候代码思路没跟上原本思路&#xff0c;直接把所有…

遇坑分享24.4.25

在对数组进行排序算法时&#xff0c;如果我使用多个下标进行元素交换的时候&#xff0c;可能会出错。 以下面的直接选择排序&#xff08;排列升序&#xff09;为例&#xff1a; public static void selectSort1(int[] arr){int left0;int rightarr.length-1;while(left<rig…

2024HWqax线上产品培训试题(天眼)

最近做了qax笔试题&#xff0c;分享一下&#xff0c;仅供学习参考&#xff0c;侵删

力扣HOT100 - 200. 岛屿数量

解题思路&#xff1a; 岛屿题目一般使用dfs。 1.判断是否越界 2.用0&#xff0c;1&#xff0c;2三个状态标识当前格子的状态&#xff08;三个状态比两个状态更清晰&#xff09; 3.向周围四个方向遍历 class Solution {public int numIslands(char[][] grid) {int cnt 0;fo…

【Spring篇 | 补充】三级缓存解决循环依赖

文章目录 7.三级缓存解决循环依赖7.1何为循环依赖&#xff1f;7.2三级缓存解析7.3三级缓存解决循环依赖7.3.1实例化A7.3.2创建B的需求7.3.3实例化B7.3.4注入A到B7.3.5B创建完成7.3.6回溯至A7.3.7清理二级缓存 7.4为什么不能用二级缓存解决循环依赖&#xff1f; 7.三级缓存解决循…

删除docker的容器与镜像

如果您想要卸载通过 docker pull influxdb 命令下载的 InfluxDB 容器&#xff0c;您需要执行以下步骤&#xff1a; 1. **停止正在运行的 InfluxDB 容器**&#xff1a; 首先&#xff0c;您需要停止任何正在运行的 InfluxDB 容器。您可以使用以下命令来查找正在运行的 InfluxD…

Xilinx 7系列 clock IP核的使用(二)

在 Clocking Wizard 中的输出时钟设置部分&#xff0c;主要目的是生成并配置系统所需的特定时钟频率和信号。这一功能在硬件设计和开发中非常关键&#xff0c;因为它允许用户精确地控制各个部分的时钟信号&#xff0c;以满足特定的性能、功耗和时序要求。 1 配置输出时钟 要启…

宝宝洗衣机买什么样的好?诚意推荐四款实力超群的婴儿洗衣机

近几年家用洗衣机标准容积的大大增加&#xff0c;从5Kg、6Kg升级到9Kg、10Kg。大容量洗衣机满足了家庭中清洗大件衣物、床上用品的需求。但由于普通大型洗衣机所洗衣物混杂&#xff0c;很多时候由于宝宝小件衣物数量不多&#xff0c;却也并不适合放在一起扔进大型洗衣机中清洗。…