vue+element+springboot实现多张图片上传

     1.需求说明
     2.实现思路
     3.el-upload组件主要属性说明
     4.前端传递MultipartFile数组与服务端接收说明
     5.完整代码

1.需求说明

    动态模块新增添加动态功能,支持多张图片上传.实现过程中对el-upload组件不是很熟悉,踩了很多坑,当然也参考过别的文章,发现处理很复杂.这里记录最终实现结果,方便有同样问题的同学查看,避免浪费多余时间.下面是发布动态的页面,点击上传图片打开本地文件选择,点击确定完成动态发布功能.
在这里插入图片描述

2.实现思路

    多张图片上传逻辑(兼容单张图片上传,只需要修改最大上传图片数量为1):
    1.需要页面选择好所有图片之后调用服务端的图片上传接口,这样处理的原因是图片上传过程中会出现几种场景:

选择好图片之后要删除之前选择的某一张或某几张;
选择好图片之后要追加几张图片

如果按照选择一张就调用一次图片上传接口,不但会增加服务端调用次数,而且还会增加无效图片的存储成本.
    2.多张图片一次上传接口调用成功后返回多张图片的图片地址,再调用服务端动态发布接口,完成动态发布功能

3.el-upload组件主要属性说明

1.禁用选择图片自动上传功能
    action属性:图片上传服务端请求地址,在组件中属于必传,默认选择一张图片就要调用一次.按照上面梳理的逻辑需要禁用调用该功能,auto-upload设置为false即可.action由于是必传,所以此处设置为#
2.开启多选
    设置multiple设置为true,默认false,否则在出现的文件选择窗口中只能选择一个文件.
3.设置选择文件最大数量
    使用limit属性,超过最大数量的处理逻辑可以在on-exceed中实现,其中处理的逻辑是页面提示已超过最大数请重新选择.
4.显示已选择的图片列表
    设置file-list实现
5.选择好图片之后追加几张图片问题处理
    on-change可以监听选中的图片,一次性选择多个图片会执行多次,但是为保证业务处理逻辑执行成功,只需要最后一次on-change中添加业务处理,所以通过判断监听返回的fileList集合长度是否是最大来处理.自定义的fileList就是on-change中最后一次on-change监听返回的fileList集合信息.下文中自定义的imgUrlList为调用文件上传服务端组装的图片参数集合.服务端的file对象对应on-change监听file中的file.raw.

handleChange(file, fileList){let length = fileList.length	this.maxLength = Math.max(length, this.maxLength)setTimeout(() => {if(length !== this.maxLength) {return} else {this.fileList=fileList}})}

6.选择好图片之后删除已选中图片问题处理
    before-remove可以监听要进行删除的图片信息.每个图片中有一个唯一标识uid,通过唯一标识删除自定义fileList中的图片

handleRemove(file, fileList){this.fileList=this.fileList.filter(imgFile=>imgFile.uid != file.uid)},

4.前端传递MultipartFile[]与服务端接收说明

    服务端接口为post请求,请求方式为post表单提交.具体如下

@PostMapping("/uploadImg")public ResultVo uploadImg(@RequestParam(name = "multipartFiles") MultipartFile[] multipartFiles,@RequestParam(name = "fileType") Integer fileType) {String url = adminDriftService.adminUploadImg(multipartFiles,fileType);return ResultVoUtil.success(url);}

前端页面需要按照FormData类型进行传递,注意一下参数拼接:

let formData = new FormData();this.imgUrlList.map(img=>{formData.append("multipartFiles", img)})formData.append("fileType", 2)

5.完整代码

    前端:
dynamic.js:

export function uploadImg(formData) {return axios({url: 'uploadImg',method: 'POST',	data: formData})
}

新增动态弹窗:

<el-dialog title="新增动态" :visible.sync="addDynamicVisible"><el-form :model="addDynamicForm"><el-form-item label="用户昵称" :label-width="formLabelWidth"><el-select v-model="addDynamicForm.userId" filterable placeholder="请选择"><el-optionv-for="systemUser in systemUserList":key="systemUser.userId":label="systemUser.userName":value="systemUser.userId"></el-option></el-select></el-form-item><el-form-item label="动态文本内容" :label-width="formLabelWidth"><el-input v-model="addDynamicForm.contentText" autocomplete="off"></el-input></el-form-item><el-form-item label="动态图片" :label-width="formLabelWidth"><el-uploadaction="#":file-list="fileList":before-remove="handleRemove":auto-upload="false" :multiple="true" :on-change="handleChange":limit="9":on-exceed="handleExceed"list-type="picture"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="closeAddDynamic()">取 消</el-button><el-button type="primary" @click="addDynamicInfo()">确 定</el-button></div></el-dialog><script>			
import {findSystemUserList,addDynamic,uploadImg} from "@/api/dynamic";
export default {data() {return {addDynamicVisible:false, // 是否显示新增动态弹窗addDynamicForm:{}, // 新增动态内容systemUserList:[],  // 系统用户列表信息formLabelWidth: '120px',imgUrlList:[], // 上传文件地址集合fileList:[], // 上传文件本地显示图片集合(非服务器图片地址)maxLength:0 // 上传文件最大值}}methods:{// 图片列表删除之后处理操作handleRemove(file, fileList){this.fileList=this.fileList.filter(imgFile=>imgFile.uid != file.uid)},	// 每次打开本地文件选择窗口选择图片后处理操作		handleChange(file, fileList){let length = fileList.length	this.maxLength = Math.max(length, this.maxLength)setTimeout(() => {if(length !== this.maxLength) {return} else {this.fileList=fileList}})},	// 选择图片超过最大限制9张之后处理操作handleExceed(files, fileList){this.msgError("最多选取9张,请重新选择!")// 清空之前选择内容this.fileList=[]},// 添加动态操作addDynamicInfo(){// 参数校验if(!this.addDynamicForm.userId){this.msgError("请选择用户!")return}this.imgUrlList=this.fileList.map(file=>file.raw)this.serverUploadImg()},	  // 上传图片处理逻辑serverUploadImg() {let formData = new FormData();this.imgUrlList.map(img=>{formData.append("multipartFiles", img)})formData.append("fileType", 2)uploadImg(formData).then(res => {if (res.code === 200) {// 图片上传成功之后触发动态发布逻辑this.addDynamicForm.contentImg=res.datathis.serverAddDynamic()}else {this.msgError(res.msg)}}).catch(() => {this.msgError("请求失败")})},	// 动态发布逻辑serverAddDynamic() {addDynamic(this.addDynamicForm).then(res => {if (res.code === 200) {this.msgSuccess('添加成功!');this.addDynamicVisible=false;this.addDynamicForm={};this.imgUrlList=[];this.fileList=[];this.serverFindDynamicInfoList(this.queryInfo)}else {this.msgError(res.msg)}}).catch(() => {this.msgError("请求失败")})},	  }
</script>

服务端文件批量上传:

  @ApiImplicitParams({@ApiImplicitParam(name = "multipartFiles",value = "图片集合",required = true, dataType = "MultipartFile[]"),@ApiImplicitParam(name = "fileType",value = "文件类型:1.用户图片:头像以及背景图;2.动态图",required = true,dataType = "Integer",paramType = "insert",example = "1")})@ApiOperation("上传图片")@PostMapping("/uploadImg")public ResultVo uploadImg(@NotNull(message = "文件对象不允许为空!") @RequestParam(name = "multipartFiles") MultipartFile[] multipartFiles,@NotNull(message = "文件类型不允许为空!") @RequestParam(name = "fileType") Integer fileType) {String url = service.adminUploadImg(multipartFiles,fileType);return ResultVoUtil.success(url);}

多张文件上传实现逻辑:

   public String adminUploadImg(MultipartFile[] multipartFiles, Integer fileType) {String imgUrlStr ="";for (int i = 0; i < multipartFiles.length; i++) {String url = aliYunService.uploadImg(multipartFiles[i], fileType,"");imgUrlStr=imgUrlStr+url;if(multipartFiles.length > 1  && i < multipartFiles.length-1){imgUrlStr=imgUrlStr+",";}}return imgUrlStr;}

图片上传具体实现逻辑:

public String uploadImg(MultipartFile multipartFile,Integer fileType,String fileNameParam) {// 返回文件地址String fileUrl = "";// 文件校验checkFile(multipartFile,fileType);// 文件上传路径// modify by txm 2023/3/24 图片类型修改为枚举String filePath = FilePathEnum.getOSSFilePath(fileType);String fileName = StrUtil.isBlank(fileNameParam) ?  multipartFile.getOriginalFilename():fileNameParam;String pathKey = StrUtil.concat(true,filePath,"/",fileName);// meta设置请求头OSS ossClient = new OSSClientBuilder().build(driftConfig.getEndpoint(), driftConfig.getOssAccessKeyId(), driftConfig.getOssAccessKeySecret());try {// 上传至阿里OSSossClient.putObject(driftConfig.getBucketName(), pathKey, new ByteArrayInputStream(multipartFile.getBytes()));fileUrl = driftConfig.getUrlPrefix() + pathKey;} catch (Exception e) {// modify by txm 2023/10/16 修改描述log.error("文件上传失败:{}", e.getMessage());throw new BusinessException("文件上传失败:请重试!");} finally {if (ossClient != null) {ossClient.shutdown();}}// 上传成功return fileUrl;}

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2023总结与展望--Empirefree

2023总结与展望--Empirefree

今年一篇博客都没写过了&#xff0c;好像完全在忙在工作和生活上面了&#xff0c;珍惜自我&#xff0c;保持热情&#xff0c;2024对我好点 文章目录 &#x1f525;1. 年终总结1.1.学习工作计划1.2. 生活计划1.3 个人总结 &#x1f525;2. 未来展望 &#x1f525;1. 年终总结 1…
阅读更多...
Windows Server 2012一键安装PHP5.4.45环境-护卫神

Windows Server 2012一键安装PHP5.4.45环境-护卫神

Windows Server 2012一键安装PHP环境&#xff08;PHP5.4FastCGI模式&#xff09; (hws.com)护卫神PHP套件|mysql安装|php环境|安装php (hws.com) 护卫神PHP套件|mysql安装|php环境|安装php
阅读更多...
【无标题】《巴黎图书馆》，又发现一本书

【无标题】《巴黎图书馆》，又发现一本书

我喜愛看的书(https://img-blog.csdnimg.cn/8cd84d33e6724f09a46831f75abe6464.jpg)在这里插入图片描述
阅读更多...
Linux命令：wc -l计算文件中的行数

Linux命令：wc -l计算文件中的行数

wc -l是一个Linux命令&#xff0c;用于计算文件中的行数。以下是wc -l命令的详细说明&#xff1a; 命令格式&#xff1a;wc -l [文件名] 选项&#xff1a; -l&#xff1a;仅计算文件中的行数。 用法&#xff1a; 如果不指定文件名&#xff0c;则wc -l命令将从标准输入读取数…
阅读更多...
Nature | 大型语言模型(LLM)能够发现和产生新知识吗？

Nature | 大型语言模型(LLM)能够发现和产生新知识吗？

大型语言模型&#xff08;LLM&#xff09;是基于大量数据进行预训练的超大型深度学习模型。底层转换器是一组神经网络&#xff0c;这些神经网络由具有自注意力功能的编码器和解码器组成。编码器和解码器从一系列文本中提取含义&#xff0c;并理解其中的单词和短语之间的关系。通…
阅读更多...
封装uniapp签字板

封装uniapp签字板

新开发的业务涉及到签字功能&#xff0c;由于是动态的表单&#xff0c;无法确定它会出现在哪里&#xff0c;不得已封装模块。 其中涉及到一个难点就是this的指向性问题&#xff0c; 第二个是微信小程序写法&#xff0c; 我这个写法里用了u-view的写法&#xff0c;可以自己修改组…
阅读更多...
JavaScript：正则表达式

JavaScript：正则表达式

JavaScript&#xff1a;正则表达式 什么是正则表达式正则表达式语法定义正则表达式判断是否有匹配的字符串查找匹配的字符串 正则表达式匹配法则元字符边界符量词字符类 什么是正则表达式 正则表达式用于匹配字符串中字符的组合模式。 正则表达式会依据其自身语法&#xff0c;…
阅读更多...
关键字：abstract关键字

关键字：abstract关键字

在 Java 中&#xff0c;abstract是一个关键字&#xff0c;用于修饰类和方法。当一个类被声明为抽象类时&#xff0c;它不能被实例化&#xff0c;只能被其他类继承。同时&#xff0c;抽象类可以包含抽象方法&#xff0c;抽象方法没有方法体&#xff0c;只包含方法的签名&#xf…
阅读更多...
计算机网络复习5

计算机网络复习5

传输层——端到端 文章目录 传输层——端到端功能传输层的寻址与端口UDPTCPTCP连接管理TCP可靠传输TCP流量控制TCP拥塞控制网络拥塞的处理 功能 从通信和信息处理的角度看&#xff0c;传输层向它上面的应用层提供通信服务&#xff0c;它属于面向通信部分的最高层&#xff0c;同…
阅读更多...
年度总结和规划

年度总结和规划

年度总结和规划 目录概述需求&#xff1a; 设计思路实现思路分析1.技术总结2.管理总结3.职业计划比较 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait…
阅读更多...
准备用vscode代替sourceinsight

准备用vscode代替sourceinsight

vscode版本1.85.1 有的符号&#xff0c;sourceinsight解析不到。 看网上说vscode内置了ripgrep&#xff0c;但ctrlshiftf在文件里查找的时候&#xff0c;速度特别慢&#xff0c;根本不像ripgrep的速度。ripgrep的速度是很快的。 但今天再查询&#xff0c;速度又很快了&#x…
阅读更多...
Python武器库开发-武器库篇之上传本地仓库到Git(三十八)

Python武器库开发-武器库篇之上传本地仓库到Git(三十八)

武器库篇之上传本地仓库到Git(三十八) 当我们在Git中创建远程仓库和进行了SSH key免密登陆之后&#xff0c;我们点击 Your respositories 可以查看我们所创建的远程仓库&#xff0c;如图所示&#xff1a; 如果我们需要将本地的仓库上传到Git&#xff0c;首先我们需要建立一个本…
阅读更多...
2023-12-29 服务器开发-centos-安装php8

2023-12-29 服务器开发-centos-安装php8

摘要: 2023-12-29 服务器开发-centos-安装php8 centos-安装php8 必备条件 Minimal CentOS 8 / RHEL 8User with sudo rightsInternet Connection (1) 更新系统 更新系统 $ sudo dnf update $ sudo dnf upgrade 重启系统 $ sudo reboot (2) 启用 EPEL & Remi 软件库…
阅读更多...
修改源码，element的el-table合并，处理合并产生的hover样式问题

修改源码，element的el-table合并，处理合并产生的hover样式问题

1、确认自己element-ui的版本号 2、此element-ui下的lib包是修改过hover样式的包，如何替换自己文件下的node_modules中的包 修改后将lib文件夹中文件替换你项目中/node_module/element-ui/Lib中的文件问题？？如果替换开发环境中的node_module的包无法升级到测试环境，因为nod…
阅读更多...
FPGA设计时序约束十四、Set_External_Delay

FPGA设计时序约束十四、Set_External_Delay

一、序言 在时序约束中对clock的约束还存在一种特殊的延时约束set external delay。set external delay如字面含义&#xff0c;设置外部的时延值&#xff0c;但这个外部时延主要是指反馈时延&#xff0c;即信号从FPGA的output端口输出后经过外部电路回到输入端口的时延值。 二…
阅读更多...
基于js和html的骰子游戏

基于js和html的骰子游戏

介绍&#xff1a; 1.游戏者选择“大”时&#xff0c;三个骰子点数之和为11-18时&#xff0c;游戏者获胜。2.游戏者选择“小”时&#xff0c;三个骰子点数之和为3-10时&#xff0c;游戏者获胜。3.如果游戏者选择具体点数&#xff0c;则根据三个骰子的点数计算&#xff0c;如果与…
阅读更多...
AI大模型时代下运维开发探索第二篇：基于大模型(LLM)的数据仓库

AI大模型时代下运维开发探索第二篇：基于大模型(LLM)的数据仓库

在SREWorks社区聚集了很多进行运维数仓建设的同学&#xff0c;大家都会遇到类似的挑战和问题&#xff1a; 数仓中存储大量数据消耗成本&#xff0c;但很多存储的数据却并没有消费。进数仓的ETL学习成本高、管理成本高&#xff0c;相关同学配合度低&#xff0c;以及上游结构改动…
阅读更多...
PiflowX组件-ReadFromKafka

PiflowX组件-ReadFromKafka

ReadFromKafka组件 组件说明 从kafka中读取数据。 计算引擎 flink 有界性 Unbounded 组件分组 kafka 端口 Inport&#xff1a;默认端口 outport&#xff1a;默认端口 组件属性 名称展示名称默认值允许值是否必填描述例子kafka_hostKAFKA_HOST“”无是逗号分隔的Ka…
阅读更多...
概率论基础复习题

概率论基础复习题

一、填空题 二、选择题 答案&#xff1a;B 答案&#xff1a;C 答案&#xff1a;C 答案&#xff1a;D。统计量不含任何未知参数。 答案&#xff1a;A 答案&#xff1a;C 样本均值是总体均值的无偏估计&#xff1b;样本方差是总体方差的无偏估计。 答案&#xff1a;B。统计值是一…
阅读更多...
机器学习的一般步骤

机器学习的一般步骤

机器学习专注于让机器从大量的数据中模拟人类思考和归纳总结的过程&#xff0c;获得计算模型并自动判断和推测相应的输出结果。机器学习的一般步骤可以概括为以下几个阶段&#xff1a; 数据收集和准备&#xff1a; 收集与问题相关的数据&#xff0c;并确保数据的质量和完整性。…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发