当前位置: 首页 > news >正文

el-upload上传图片图片、el-load默认图片重新上传、el-upload初始化图片、el-upload编辑时回显图片

  • 问题
    我用el-upload上传图片,再上一篇文章已经解决了,el-upload上传图片给SpringBoot后端,但是又发现了新的问题,果然bug是一个个的冒出来的。新的问题是el-upload编辑时回显图片的保存
    • 问题描述:回显图片需要将默认的 file-list设置为data中的属性,以设置默认值。如下,设置为imgList
 <el-uploadaction=""list-type="picture-card"multiple:on-change="handlChange":file-list="imgList":on-error="handleErr"ref="upload":limit="10"accept=".jpg,.png,.jpeg":on-exceed="handleMaxNum":auto-upload="false"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{file}"><imgclass="el-upload-list__item-thumbnail":src="file.url" alt=""><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span><spanclass="el-upload-list__item-delete"@click="handleRemove(file)"><i class="el-icon-delete"></i></span></span></div></el-upload>

但是这样的自己设置的值,他的格式是这样的:

this.imgList = this.imgList.map(url => ({url: url,})

与自己上传文件通过:file_list得到的内容不同,(也就是如果你有个添加图片的功能,有个编辑图片的功能,编辑功能你要设置初始值,但是他们的imgList不一样),有图为证
在这里插入图片描述
在这里插入图片描述
这会导致什么呢?首先,我们需要将imgList的文件转成FormData格式的文件传给后端,通过获取file-ist,可以通过:on-change="handlChange"获取

 handleChange(file, fileList) {this.imgList = fileList;},
  1. 如果你是添加图片的功能的时候,他是没问题的,可以直接使用
    formData.append('files', item.raw);转成FormData的类型。
  2. 但是如果你是要回显图片再保存,即编辑的功能,这个时候你要设置初始值,即用上面所说的方式设置。这种格式的的imgList,就不能直接使用 formData.append('files', item.raw);这种方式转成FormData,而要使用fetch的方式
  • 解决
    下面是解决的代码,可以先对imgList的url进行判断,因为自己上传的url开头是不带"blob"的,顺便说一下,因为fetch是异步的,所以要通过设置Promise,等fetch全部执行完再进行保存图片,否则FormData还是会为空
this.imgList.forEach(item => {let url = item.url;if(url.startsWith("blob")){formData.append('files', item.raw);}else {let promise = fetch(url, {headers: new Headers({'Origin': location.origin}),mode: 'no-cors'}).then(response => response.blob()).then(blob => {// 创建 URL 对象以便提取文件名let filename = url.split('/').pop();// 创建一个虚拟的 File 对象let file = new File([blob], filename, {type: 'image/bmp,image/jpeg,image/png,image/webp'});console.log(file)formData.append('files', file);}).catch(error => {console.error('Failed to fetch image:', error);});promises.push(promise);}});Promise.all(promises).then(() => {console.log("formdata", formData)let uri = "/" + newAttractionIdsaveImgs(uri, formData).then(resPic => {if (resPic.data.success) {// this.$message({//   type:"success",//   message:resPic.data.msg// })} else {this.$message({type: "info",message: resPic.data.msg})}}).catch(err => {console.log("出错", err)})

整合主要代码如下

<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-dialog :title="title" :visible.sync="editFormVisible" width="35%" @click="closeDialog"><el-form-item label="图片" prop="imgList"><!--          :file-List可以填默认值--><el-uploadaction=""list-type="picture-card"multiple:on-change="handleChange":file-list="imgList":on-error="handleErr"ref="upload":limit="10"accept=".jpg,.png,.jpeg":on-exceed="handleMaxNum":auto-upload="false"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{file}"><imgclass="el-upload-list__item-thumbnail":src="file.url" alt=""><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span><spanclass="el-upload-list__item-delete"@click="handleRemove(file)"><i class="el-icon-delete"></i></span></span></div></el-upload></el-form-item></el-form>data() {  imgList: [],
}
methods: {
handleRemove(file) {let arr = this.$refs.upload.uploadFilesconsole.log("arr是",arr)// 2.从pics数组中,找到图片对应的索引值let index = arr.indexOf(file)// 3.调用splice方法,移除图片信息arr.splice(index, 1)this.imgList=arrconsole.log(this.imgList)},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},handleChange(file, fileList) {this.imgList = fileList;},handleMaxNum() {this.$message({type: "info",message: "最多选择10张图片"})},
// 编辑、增加页面保存方法subm**加粗样式**itForm(editData) {this.loading = truethis.$refs[editData].validate(valid => {if (valid) {attractionSave(this.editForm).then(res => {this.editFormVisible = false// console.log(res)if (res.data.success) {let newAttractionId = res.data.attractionId//信息保存成功后,保存图片if ( newAttractionId != '') {let formData = new FormData(); // 用 FormData 存放上传文件// 将图片转为 FormData 格式let promises = [];this.imgList.forEach(item => {let url = item.url;if(url.startsWith("blob")){formData.append('files', item.raw);}else {let promise = fetch(url, {headers: new Headers({'Origin': location.origin}),mode: 'no-cors'}).then(response => response.blob()).then(blob => {// 创建 URL 对象以便提取文件名let filename = url.split('/').pop();// 创建一个虚拟的 File 对象let file = new File([blob], filename, {type: 'image/bmp,image/jpeg,image/png,image/webp'});console.log(file)formData.append('files', file);}).catch(error => {console.error('Failed to fetch image:', error);});promises.push(promise);}});Promise.all(promises).then(() => {console.log("formdata", formData)let uri = "/" + newAttractionIdsaveImgs(uri, formData).then(resPic => {if (resPic.data.success) {// this.$message({//   type:"success",//   message:resPic.data.msg// })} else {this.$message({type: "info",message: resPic.data.msg})}}).catch(err => {console.log("出错", err)})})}this.$message({type: 'success',message: res.data.msg})} else {this.$message({type: 'info',message: res.data.msg})}}).catch(err => {this.editFormVisible = falsethis.loading = falsethis.$message.error('保存失败,请稍后再试!')console.log(err)return false})var that = thissetTimeout(function () {that.loading = false;that.getData()}, 1000)} else {this.loading = falsereturn false}})},//显示编辑界面handleEdit: function (index, row) {this.editFormVisible = trueif (row != undefined && row != 'undefined') {this.title = '修改';this.imgList=row.imgListthis.imgList = this.imgList.map(url => ({url: url,}));console.log("list", this.imgList)} }</el-dialog>

同时,附上SpringBoot业务层代码

  @Overridepublic ResJson savePicture(List<MultipartFile> files, String attractionLocationById) {ResJson resJson = new ResJson();// 获取文件夹中所有文件的列表File file1 = new File(attractionLocationById);File[] folderFiles = file1.listFiles();// 创建一个 HashSet,用于存储上传文件的名称Set<String> uploadedFileNames = new HashSet<>();if(files==null) {for (File folderFile : folderFiles) {if (folderFile.delete()) {System.out.println("删除文件: " + folderFile.getName() + " 成功");} else {System.out.println("删除文件: " + folderFile.getName() + " 失败");}}file1.delete();return null;}for (MultipartFile file : files) {uploadedFileNames.add(file.getOriginalFilename());}System.out.println("uploadedFileNames = " + uploadedFileNames);//删除图片,其实只要全部删除,再重新下载即可,考虑到图片数量可能多,就搞成判断了if(folderFiles!=null) {// 遍历文件夹中的文件for (File folderFile : folderFiles) {String folderFileName = folderFile.getName();// 如果文件夹中的文件不在上传的文件列表中,则删除该文件if (!uploadedFileNames.contains(folderFileName)) {System.out.println(folderFileName);if (folderFile.delete()) {System.out.println("删除文件: " + folderFile.getName() + " 成功");} else {System.out.println("删除文件: " + folderFile.getName() + " 失败");}}else{uploadedFileNames.remove(folderFileName);}}}// 保存上传的文件for (MultipartFile file : files) {try {String originalFilename = file.getOriginalFilename();//如果已经有了,在上面的被移除了,只有在剩下的没被排除内的就下载if(uploadedFileNames.contains(originalFilename)) {// 构建真实的文件路径Path path = Paths.get(attractionLocationById + originalFilename);// 确保目录路径存在Files.createDirectories(path.getParent());// 将上传文件保存到指定位置file.transferTo(path);System.out.println("图片保存成功");System.out.println("保存+1");}resJson.setMsg("图片保存成功");resJson.setSuccess(true);} catch (IOException e) {e.printStackTrace();System.out.println("上传失败");resJson.setMsg("图片保存失败");resJson.setSuccess(false);}}return resJson;}

相关文章:

el-upload上传图片图片、el-load默认图片重新上传、el-upload初始化图片、el-upload编辑时回显图片

问题 我用el-upload上传图片&#xff0c;再上一篇文章已经解决了&#xff0c;el-upload上传图片给SpringBoot后端,但是又发现了新的问题&#xff0c;果然bug是一个个的冒出来的。新的问题是el-upload编辑时回显图片的保存。 问题描述&#xff1a;回显图片需要将默认的 file-lis…...

【拓扑空间】示例及详解1

例1 度量空间的任意两球形邻域的交集是若干球形邻域的并集 Proof&#xff1a; 任取空间的两个球形邻域、&#xff0c;令 任取,令 球形领域 例2 规定X的子集族,证明是X上的一个拓扑 Proof&#xff1a; 1. 2., &#xff08;若干个球形邻域的并集都是的元素&#xff0c;元素…...

linux安装jdk8

上传到某个目录&#xff0c;例如&#xff1a;/usr/local/ tar -xvf jdk-8u144-linux-x64.tar.gz配置环境变量&#xff1a; export JAVA_HOME/usr/local/java export PATH$PATH:$JAVA_HOME/bin设置环境变量&#xff1a; source /etc/profile...

Spring重点知识(个人整理笔记)

目录 1. 为什么要使用 spring&#xff1f; 2. 解释一下什么是 Aop&#xff1f; 3. AOP有哪些实现方式&#xff1f; 4. Spring AOP的实现原理 5. JDK动态代理和CGLIB动态代理的区别&#xff1f; 6. 解释一下什么是 ioc&#xff1f; 7. spring 有哪些主要模块&#xff1f;…...

HTML基础知识详解(上)(如何想知道html的全部基础知识点,那么只看这一篇就足够了!)

前言&#xff1a;在学习前端基础时&#xff0c;必不可少的就是三大件&#xff08;html、css、javascript &#xff09;&#xff0c;而HTML&#xff08;超文本标记语言——HyperText Markup Language&#xff09;是构成 Web 世界的一砖一瓦&#xff0c;它定义了网页内容的含义和…...

如何借助Idea创建多模块的SpringBoot项目

目录 1.1、前言1.2、开发环境1.3、项目多模块结构1.4、新建父工程1.5、创建子模块1.6、编辑父工程的pom.xml文件 1.1、前言 springmvc项目&#xff0c;一般会把项目分成多个包:controler、service、dao、utl等&#xff0c;但是随着项目的复杂性提高&#xff0c;想复用其他一个模…...

爬虫 新闻网站 并存储到CSV文件 以红网为例 V1.0

爬虫&#xff1a;红网网站&#xff0c; 获取当月指定关键词新闻&#xff0c;并存储到CSV文件 V1.0 目标网站&#xff1a;红网 爬取目的&#xff1a;为了获取某一地区更全面的在红网已发布的宣传新闻稿&#xff0c;同时也让自己的工作更便捷 环境&#xff1a;Pycharm2021&#…...

CentOS 使用 Cronie 实现定时任务

CentOS 使用 Cronie 实现定时任务 文章目录 CentOS 使用 Cronie 实现定时任务一、简介二、基本使用1、常用命令2、使用示例第一步&#xff1a;创建脚本/home/create.sh第二步&#xff1a;添加定时任务第三步&#xff1a;重启 cronie 服务额外&#xff1a;查看 cronie 运行状态定…...

java生成word

两种方案 一、poi-tl生成word <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.1</version> </dependency> public static void main(String[] args) throws Exception {String…...

C语言中的结构体:揭秘数据的魔法盒

前言 在C语言的广阔天地中&#xff0c;结构体无疑是一颗璀璨的明珠。它就像是一个魔法盒&#xff0c;能够容纳各种不同类型的数据&#xff0c;并按我们的意愿进行组合和排列。那么&#xff0c;这个魔法盒究竟有何神奇之处呢&#xff1f;让我们一探究竟。 一、结构体的诞生&…...

Listener

文章目录 ListenerServletContextListenerServletContextAttributeListenerHttpSessionListenerHttpSessionAttributeListenerServletRequestListenerServletRequestAttributeListenerHttpSessionBindingListenerHttpSessionActivationListener Listener Listener 监听器它是 J…...

单细胞RNA测序(scRNA-seq)SRA数据下载及fastq-dumq数据拆分

单细胞RNA测序&#xff08;scRNA-seq&#xff09;入门可查看以下文章&#xff1a; 单细胞RNA测序&#xff08;scRNA-seq&#xff09;工作流程入门 单细胞RNA测序&#xff08;scRNA-seq&#xff09;细胞分离与扩增 1. NCBI查询scRNA-seq SRA数据 NCBI地址&#xff1a; https…...

金蝶Apusic应用服务器 未授权目录遍历漏洞复现

0x01 产品简介 金蝶Apusic应用服务器(Apusic Application Server,AAS)是一款标准、安全、高效、集成并具丰富功能的企业级应用服务器软件,全面支持JakartaEE8/9的技术规范,提供满足该规范的Web容器、EJB容器以及WebService容器等,支持Websocket1.1、Servlet4.0、HTTP2.0…...

成都百洲文化传媒有限公司电商服务的新领军者

在当今数字化时代&#xff0c;电商行业正以前所未有的速度蓬勃发展。在这个大背景下&#xff0c;成都百洲文化传媒有限公司凭借其深厚的行业经验和精湛的专业技能&#xff0c;正迅速崛起为电商服务领域的新领军者。 一、专业引领&#xff0c;成就卓越 作为一家专注于电商服务的…...

从无到有开始创建动态顺序表——C语言实现

顺序表的概念 顺序表的底层结构是数组&#xff0c;对数组的封装&#xff0c;实现了常用的增删改查等接口。在物理结构和逻辑结构都是连续的&#xff0c;物理结构是指顺序表在计算机内存的存储方式&#xff0c;逻辑结构是我们思考的形式&#xff0c;顺序表和数组是类似的&#x…...

Unix 网络编程, Socket 以及bind(), listen(), accept(), connect(), read()write()五大函数简介

Unix网络编程是针对类Unix操作系统&#xff08;包括Linux、BSD以及其他遵循POSIX标准的操作系统&#xff09;进行网络通信开发的技术领域。网络编程涉及创建和管理网络连接、交换数据以及处理不同层次网络协议栈上的各种网络事件。在Unix环境中&#xff0c;网络编程通常涉及到以…...

【附下载】2024全行业数字化转型企业建设解决方案PPT合集

精品推荐&#xff0c;2024全行业数字化转型企业建设解决方案PPT合集&#xff0c;精品PPT源格式共21份。 以下是资料目录&#xff0c;如需下载&#xff0c;请前往星球获取&#xff1a; 1.制造业数字化转型解决方案及应用.pptx 2.医院数字化网络解决方案.pptx 3.食品饮料工厂数字…...

【QT+QGIS跨平台编译】056:【pdal_lepcc+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、pdal_lepcc介绍二、pdal下载三、文件分析四、pro文件五、编译实践一、pdal_lepcc介绍 pdal_lepcc 是 PDAL(Point Data Abstraction Library)的一个插件,用于点云数据的压缩。它基于 EPCC(Entwine Point Cloud Compression)算法,提供了对点…...

蓝桥集训之斐波那契数列

蓝桥集训之斐波那契数列 核心思想&#xff1a;矩阵乘法 将原本O(n)的递推算法优化为O(log2n) 构造1x2矩阵f和2x2矩阵a 发现f(n1) f(n) * a 则f(n1) f(1) * an可以用快速幂优化 #include <iostream>#include <cstring>#include <algorithm>using na…...

程序员的工资是多少,和曹操有莫大的关系

曹操是谁大家都知道了吧&#xff0c;他是三国时期的一个有名的大老板&#xff0c;谁知道曹操的工资是多少呢&#xff1f;这个其实也不好说&#xff0c;有时候曹操赚很多的钱&#xff0c;有时候也亏血本&#xff0c;甚至连脑袋都差点掉了。创业不容易啊&#xff0c;曹老板也是如…...

使用Element Plus

1. 官网安装 安装 | Element Plus (gitee.io) 安装&#xff1a; npm install element-plus --save 在main.ts中全局注册ElementPlus并使用 //加入element-plus import ElementPlus from element-plus; //加入element-plus样式 import element-plus/dist/index.css; import…...

单例(Singleton)设计模式总结

1. 设计模式概述&#xff1a; 设计模式是在大量的实践中总结和理论化之后优选的代码结构、编程风格、以及解决问题的思考方式。设计模式免去我们自己再思考和摸索。 就像是经典的棋谱&#xff0c;不同的棋局&#xff0c;我们用不同的棋谱。"套路"经典的设计模式一共有…...

LeetCode每日一题之专题一:双指针 ——快乐数

快乐数OJ链接&#xff1a;202. 快乐数 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 题目分析: 为了房便叙述&#xff0c;将「对于⼀个正整数&#xff0c;每⼀次将该数替换为它每个位置上的数字的平方和」这⼀个 操作记为 x 操作&#xff1b; 题目告诉我们&#…...

Docker Desktop 不支持 host 网络模式

先把这个结论的放在前面&#xff0c;直接访问链接就能看到官方文档中已经明确说了不支持。 参考链接&#xff1a;docker desktop for windows 不支持 host 网络模式 以前对于 docker 的网络模式&#xff0c;一直只是了解&#xff0c;没有亲自尝试过。结果今天在尝试 docker 的 …...

Linux网络编程二(TCP图解三次握手及四次挥手、TCP滑动窗口、MSS、TCP状态转换、多进程/多线程服务器实现)

文章目录 1、TCP三次握手(1) 第一次握手(2) 第二次握手(3) 第三次握手 2、TCP四次挥手(1) 一次挥手(2) 二次挥手(3) 三次挥手(4) 四次挥手 3、TCP滑动窗口4、TCP状态时序图5、多进程并发服务器6、多线程并发服务器 1、TCP三次握手 TCP三次握手(TCP three-way handshake)是TCP协…...

【云原生篇】K8S之Job 和 CronJob

在 Kubernetes (K8s) 中&#xff0c;Job 和 CronJob 是两种管理批处理任务的资源对象&#xff0c;它们用于控制短暂的一次性任务&#xff08;Job&#xff09;或定时执行的周期性任务&#xff08;CronJob&#xff09;。 Job 概念 Job 负责运行一个或多个 Pod&#xff0c;并确…...

PHP8.3-ZTS版本安装流程以及添加扩展

下载php-8.3.x.tar.gz至服务器并解压 [rootapisix-test php-8.3.4]# wget https://www.php.net/distributions/php-8.3.4.tar.gz进入目录执行编译命令&#xff0c;必须要带 --enable-zts 才能激活zts功能 [rootapisix-test php-8.3.4]# ./configure --prefix/usr/local/p…...

RabbitMQ系统监控、问题排查和性能优化实践

一、系统监控&#xff1a;RabbitMQ的各项性能指标及监控 Message Rates&#xff1a;消息率包含了publish&#xff0c;deliver/get&#xff0c;ack等方面的数据&#xff0c;反映了消息在系统中流转的情况。Queue Length&#xff1a;队列长度反映了系统当前的负载情况。如果队列…...

【华为OD机试】根据IP查找城市(贪心算法—JavaPythonC++JS实现)

本文收录于专栏:算法之翼 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码讲解(Ja…...

css:阴影效果box-shadow

属性 box-shadow 属性值由四个参数组成&#xff1a; 水平偏移量&#xff1a;表示阴影相对于元素的水平位置。垂直偏移量&#xff1a;表示阴影相对于元素的垂直位置。模糊度&#xff1a;表示阴影的模糊程度。颜色&#xff1a;表示阴影的颜色 示例 单个box-shadow 0px -2px 6p…...

网站建设制作 南京公司/网络兼职平台

经常看日本动漫的朋友应该知道&#xff0c;在这些动漫作品中&#xff0c;主人公们是初高中生的居多&#xff0c;可能主要还是因为这些动漫主要的受众人群也是这部分观众吧&#xff0c;也是借助这些动漫作品&#xff0c;我们可以了解到一些日本学生的日常。比如从《轻音少女》、…...

静态营销网站代码/重庆网站搜索排名

解法一&#xff1a;http://siukwan.sinaapp.com/?p189 https://www.cnblogs.com/TonyYPZhang/p/5123058.html 1.这道题目主要是求一个无向图中&#xff0c;以哪个节点为根节点的树的高度最小&#xff1b; 2.常规方法可以使用BFS或者DFS&#xff0c;对每个点都遍历一遍&…...

如何建设公司的网站/网站排名

请确保具备以下条件&#xff1a; Internet 连接。 计算机C盘大于6 GB 的可用空间用于下载。 8GB的U盘。建议使用空白U盘&#xff0c;因为其中的任何内容都将被删除。重要信息 建议在运行 Windows7 或Windows8.1 的电脑上使用介质创建工具。如果你在运行Windows10 的电脑上运行此…...

wordpress修改教程视频/cba目前排行

最近一个月比较累&#xff0c;十月居然没有写任何的文章。一方面是家事比较多&#xff0c;另一方面是工作比较忙&#xff0c;也在方法积累期。现在就结合这段时间的工作总结一下经验。前面学习的软件架构等等&#xff0c;都是属于纯粹的技术设计。这段时间的工作很多是属于前期…...

营销型网站建设定制网站建设/百度极速版app下载

前言#回歸使用 vim 當作主要開發工具後&#xff0c;為了省下調效 vimrc 的時間&#xff0c;決定先用別人整理好的設定&#xff0c;於是乎找到了 spf13-vim&#xff0c;便開始的了快樂的 vim 生活。spf13-vim 用了數個月之後&#xff0c;熟悉了不少的設定方式&#xff0c;也調整…...

创新的网站建设公司排名/高级搜索百度

在web应用中&#xff0c;我们在web.xml配置URL路径问题时&#xff0c;经常这样配置&#xff1a; [html] view plaincopy print?<servlet-mapping> <servlet-name>spring-MVC</servlet-name> <url-pattern>/</url-pattern> </serv…...