ant design 照片墙样式手动上传多图支持multiple_react ant-design upload图片上传 multiple-程序员宅基地

默认样式（啥都没有……）：

一条：

最大条数我设置的3：

先简单说下我做的过程，希望有大佬指点，也想能够帮助到刚入门的各位同学。

需求和实现：点击上传图片显示图片缩略图并不立即上传，将beforeUpdata中获取到的file存入fileList数组(multiple多选时，beforeUpdata依次传入每一张图的file)，同时在beforeUpdata中要控制随后可上传的数组长度以及图片去重，之后的增删操作只需控制fileList的数据即可。

我这里直接用的照片墙样式，需要通过base64转成一个链接地址放入我的fileList中才能显示缩略图，因为真正上传图片时不需要这段数据，我会在真正上传delete掉。

代码：

<template>
  <div class="clearfix">
    <a-upload
      listType="picture-card"
      :fileList="fileList"
      :beforeUpload="beforeUpload"
      :multiple="true"
      :remove="handleRemove"
    >
      <div v-if="fileList.length < 3">
        <a-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
  </div>
</template>
<script>
export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload (file) {
      if (this.fileList.length > 2) {
        return false
      }
      this.exeBase(file)
      return false
    },
    async exeBase (file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileList.length < 3 && this.preventRepeat(imageUrl)) {
          const file2 = file
          file2.url = imageUrl
          this.fileList = [...this.fileList, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    getBase64 (file, callback) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          callback(reader.result)
          resolve('成功')
        }
      })
    },
    preventRepeat (url) {
      // 排除相同图片
      for (let i = 0, len = this.fileList.length; i < len; i++) {
        if (this.fileList[i].url === url) {
          return false
        }
      }
      return true
    }
  }
}
</script>

直接可以放在用vue-cli构建的环境中使用，可根据业务需要再做修改。

本文链接：https://blog.csdn.net/weixin_39651562/article/details/100010828

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

JAVA面试题分享二百二十八：MySQL三大日志(binlog、redo log和undo log)详解_mysql的binlog面试题-程序员宅基地

文章浏览阅读955次，点赞16次，收藏24次。MySQL日志主要包括错误日志、查询日志、慢查询日志、事务日志、二进制日志几大类。其中，比较重要的还要属二进制日志binlog（归档日志）和事务日志redo log（重做日志）和undo log（回滚日志）。今天就来聊聊redo log（重做日志）、binlog（归档日志）、两阶段提交、undo log（回滚日志）。MySQL InnoDB 引擎使用redo log(重做日志)保证事务的持久性，使用undo log(回滚日志)来保证事务的原子性。MySQL数据库的数据备份、主备、主主、主从都离不开。_mysql的binlog面试题

密码学选择_计算和估计出破译密码系统的计算量的方法-程序员宅基地

文章浏览阅读3.7k次。1.第一个实用的、迄今为止应用最广的公钥密码体制是(A )。A. RSA B.Elgamal C.ECC D.NTRU2.一个密码系统至少由明文、密文、加密算法和解密算法、密钥五部分组成，而其安全性是由（ D）决定的。A.加密算法 B.解密算法 C.加密算法和解密算法 D.密钥3.计算和估计出破译密码系统的计算量下限，利用已有的最好方法破译它所需要的代价超出了破译者的破译能力(如时间、空间、资金等资源)，那么该密码系统的安全性是（ B）。A.无条件安全 B.计算安全 C.可证明安全..._计算和估计出破译密码系统的计算量的方法

卢京潮老师视频-自控原理PPT_卢京潮自动控制原理ppt-程序员宅基地

文章浏览阅读4.3k次，点赞10次，收藏4次。卢京潮老师视频配套课件自取自取！自动控制原理–卢京潮 2009 完整版西北工业大学卢京潮教授链接：https://pan.baidu.com/s/1MwB-awndbUe3osBuexYkow提取码：6enwB站同步视频考研首选-自动控制原理（自控）-卢京潮老师_哔哩哔哩_bilibili..._卢京潮自动控制原理ppt

git版本控制工具-程序员宅基地

文章浏览阅读645次，点赞17次，收藏5次。git是一个代码版本控制工具，开发人员常用的工具，可以将各个阶段编写的代码提交到远程Git或github仓库中，每个开发人员书写不同的功能，最后使用Git命令将各个功能进行集合，有助于多人协作，提高了开发效率，并且，上传的代码，还可以进行拉取，覆盖到本地，相当于恢复快照功能。

在中国，营销自动化会和销售自动化一样成为一个笑话-程序员宅基地

文章浏览阅读1.7k次，点赞2次，收藏4次。（1）为什么要做客户运营一个公司有N位CXO：1、营销服务卖给：CMO2、交易服务卖给：CEO3、上市/融资/金融信贷/财税服务卖给：CFO4、人力服务卖给：CHO5、I..._自动化公司笑话

Spring-Redis-验证lettuce共享和独占连接特性_org.springframework.data.redis.connection.lettuce.-程序员宅基地

文章浏览阅读4k次。默认情况，Lettuce 对所有非阻塞和非事务型操作共享同一个线程安全的本地连接。可配置LettucePool，为阻塞和事务操作，提供独占连接。通过源码与debug验证这些特性。_org.springframework.data.redis.connection.lettuce.lettuceconnectionfactory

随便推点

行列式点过程推荐多样性算法_行列式点过程dpp改进-程序员宅基地

文章浏览阅读1.8k次。推荐多样性的衡量指标是单个推荐列表中物品之间的差异程度，通过计算在同一个推荐 list 中两两 Item 之间的相似度的平均值来进行衡量。DPP（Determinantal Point Process）行列式点过程，是一种性能较高的概率模型。将复杂的概率计算转换成简单的行列式计算，通过核矩阵的行列式计算每一个自己的概率。..._行列式点过程dpp改进

T-SQL编程函数（用户自定义函数）_ssms内置函数-程序员宅基地

文章浏览阅读1.5k次。在SSMS中会有两种函数：内置函数，用户自定义函数。内置函数，如max（），min（）用户自定函数是自己编写的函数，分为标量函数，表函数先介绍一下标量函数范例：1.创建标量函数create function Greatest(@v1 float, @v2 float, @v3 float) RETURNS floatASBEGIN declare @ret float; set @ret=@v1; if @ret<@v2 begin set @ret=@v2 _ssms内置函数

关于Java的No operations allowed after connection closed问题简述、分析以及修改方案-程序员宅基地

文章浏览阅读2.3k次，点赞9次，收藏5次。Java可视化 No operations allowed after connection closed自己做java可视化没有出现这个问题，但是发现不少同学都出现这个问题了，简单概述一下这个问题解决方案，造成原因还没理解通透。以上是截取的控制台报错片段，翻译成中国人能懂的语言就是在数据库连接关闭后操作不被允许但是在经过不懈努力后，甚至给他一个全新链接之后，他依然会报错，真的脑袋疼查阅了众多csdn博客，要不就是要求改啥springboot的配置文件，要不设置MySQL链接休眠时间啥的首先我_no operations allowed after connection closed

算法笔记习题 2.3小节_输入3个整,求输出其中的最大数和最小数,换行输出两个数。-程序员宅基地

文章浏览阅读551次。算法笔记@Ada_Lake算法笔记–2.3小节算法笔记代码保留地~~~2.3小节——C/C++快速入门-&amp;amp;amp;amp;amp;amp;gt;选择结构问题 A: 例题4-1 一元二次方程求根题目描述，求一元二次方程ax2+bx+c=0的根，三个系数a, b, c由键盘输入，且a不能为0，但不保证b2-4ac&amp;amp;amp;amp;amp;amp;gt;0。程序中所涉及的变量均为double类型。输入，以空格分隔的一元二次方程的三个系_输入3个整,求输出其中的最大数和最小数,换行输出两个数。

“华为杯”第十七届中国研究生数学建模竞赛-【华为杯】F题：质心平衡供油策略设计：贪心和搜索的结合（附优秀论文和代码实现）_华为杯论文-程序员宅基地

文章浏览阅读1.5k次。资料显示，飞行器质心对飞行安全会产生很大影响，因为设备布置问题，飞行器油箱一般分散布置在机身各处[1-2]。携带有多个油箱的飞行器在飞行过程中，通过若干个油箱联合供油以同时满足飞行任务要求和发动机工作需求。各个油箱内油量的分布和供油策略将导致飞行器质心变化，进而影响对飞行器的控制。统计资料显示，大多数此类飞行器在日常工作中都存在燃油消耗不平衡的现象[3]，因此，需要制定利于飞行器控制的各油箱的供油策略。飞行器的结构（如油箱的位置、形状、尺寸、供油关系、供油速度限制等）影响油箱。_华为杯论文

树莓派安装python2.7_树莓派（二）深度环境搭建-程序员宅基地

文章浏览阅读3.1k次，点赞2次，收藏2次。最近日子一直在做控制方面的事情，后面日子逐步打算将树莓派应用到船舶动力系统的智能控制中(预测控制，动态规划，深度强化学习等等)。今日这篇讲解树莓派安装tensorflow的事情，踏着一路坑过来，，，心累。。。首先讲几个重点：1. 最好不要下载最新的树莓派系统，老一点好，这样树莓派里面自带的python3.x版本会比较低(python3.4+就行)，当然你也可以自己卸载重新安装，不过坑真的很多哈。一..._树莓派系统支持py2.7