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

[ssi-uploader插件]解决如何接收服务器返回数据+修改参数名称

前言

ssi-uploader是一款非常好用的多文件上传插件,源码是开源的,在github上面即可下载:

https://github.com/ssbeefeater/ssi-uploader

但是源码有些微小的不足,今天我们解决两点问题:

  • 上传文件完成后,服务器会返回下载的sso链接,原生的ssi-uploader代码是无法接收返回数据的,我们要解决的就是拿到服务器返回的结果数据。
  • 上传的文件有个参数名称,ssi-uploader也是无法修改的,我们也要解决这个问题。

解决服务器返回

我们先来看下案例

springboot后台接受多文件上传的代码片段:

@PostMapping("/upload-list")public Result<List<String>> uploadImage(@RequestParam("files[]") MultipartFile[] files) {String imgSavePath = settingsMapper.one().getImgSavePath() ;String videoSavePath = settingsMapper.one().getVideoSavePath();try {List<String> results = new ArrayList<String>();for(MultipartFile file : files) {String fileName = file.getOriginalFilename();String fileEx = Resources.getFileExtension(fileName);// 获取文件名fileName = UUID.randomUUID().toString() + fileEx;String filePath = imgSavePath + "/" + fileName;if(Files.isVideo(file.getOriginalFilename())) {filePath = videoSavePath + "/" + fileName;}// 保存文件到本地file.transferTo(new File(filePath));results.add(downloadPath + fileName) ;}return Result.ok(results);} catch (IOException e) {e.printStackTrace();return Result.err(e.getMessage());}}

上面代码接受的文件参数是file[] , 上传完成后,返回了一个 下载的链接给到前端。

前端代码片段:

		$('#ssi-upload').ssi_uploader({url:Host + 'upload-list',allowed:['jpg','gif','txt','png','jpeg','mp4'],preview:false,  //关闭预览maxFileSize:400,  // 最大上传400MBonEachUpload:function(fileInfo){// 这个就是单个文件上传后,服务器返回的信息console.log("服务器返回: " + fileInfo.server_res);}});

我们运行前端代码:

当然原生的代码是没有的,我经过二次开发处理后才有,二次开发后的代码:

找到 ssi-uploader 定制

https://gitee.com/hadluo/html_code.git

如何修改参数名称

这个其实很简单,原生参数名称是file[] , 后面的[]必须加上,所以springboot那边写法必须是:

public Result<List<String>> uploadImage(@RequestParam("files[]") MultipartFile[] files) {
}

如果你想改也很简单,只需添加 names 选项:

$('#ssi-upload').ssi_uploader({url:Host + 'upload-list',allowed:['jpg','gif','txt','png','jpeg','mp4'],preview:false,maxFileSize:400,names:"file_list",onEachUpload:function(fileInfo){console.log("服务器返回: " + fileInfo.server_res);}});

这里我们 指定了 名称 为 file_list , 那么后端写法:

@PostMapping("/upload-list")public Result<List<String>> uploadImage(@RequestParam("file_list") MultipartFile[] files) {
}

运行上传成功 , 当然代码也是我定制的源码,下载地址就在上面讲到。

到此我们就解决了文章开头描述的2个问题。谢谢观看。

相关文章:

  • 数据库练习题
  • oracle中如何查询特定日期?
  • 计算机网络——应用层
  • 【稳定检索/投稿优惠】2024年材料科学与能源工程国际会议(MSEE 2024)
  • json.dumps参数
  • 可视化数据科学平台在信贷领域应用系列四:决策树策略挖掘
  • 如何使用 Magisk 获取 Google Pixel 4 或 Pixel 4 XL 的 Root 权限
  • iptables实现端口映射转发
  • APP开发技术的变迁史
  • Cell-在十字花科植物中年生和多次开花多年生开花行为的互相转化-文献精读21
  • 基于CycleGAN的图像风格转换
  • 2024年谷歌SEO如何快速出排名效果抢占首页制高点?
  • 自注意力机学习
  • 【小白专用24.6.8】C#Lambda表达式
  • Linux下线程的互斥与同步详解
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • 【5+】跨webview多页面 触发事件(二)
  • 4. 路由到控制器 - Laravel从零开始教程
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • Intervention/image 图片处理扩展包的安装和使用
  • javascript数组去重/查找/插入/删除
  • laravel with 查询列表限制条数
  • learning koa2.x
  • leetcode386. Lexicographical Numbers
  • spring-boot List转Page
  • 搞机器学习要哪些技能
  • 使用parted解决大于2T的磁盘分区
  • 突破自己的技术思维
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • ​ 全球云科技基础设施:亚马逊云科技的海外服务器网络如何演进
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • # 安徽锐锋科技IDMS系统简介
  • #QT(QCharts绘制曲线)
  • #我与Java虚拟机的故事#连载16:打开Java世界大门的钥匙
  • $.ajax中的eval及dataType
  • (10)ATF MMU转换表
  • (2/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (4)事件处理——(7)简单事件(Simple events)
  • (k8s)Kubernetes 从0到1容器编排之旅
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (附源码)计算机毕业设计ssm本地美食推荐平台
  • (四)js前端开发中设计模式之工厂方法模式
  • (五十)第 7 章 图(有向图的十字链表存储)
  • (转)Google的Objective-C编码规范
  • (转)清华学霸演讲稿:永远不要说你已经尽力了
  • ****** 二十三 ******、软设笔记【数据库】-数据操作-常用关系操作、关系运算
  • ***监测系统的构建(chkrootkit )
  • .NET 8 中引入新的 IHostedLifecycleService 接口 实现定时任务
  • .Net Core 微服务之Consul(二)-集群搭建
  • .NET Core 中的路径问题
  • .NET Framework 和 .NET Core 在默认情况下垃圾回收(GC)机制的不同(局部变量部分)
  • .NET Windows:删除文件夹后立即判断,有可能依然存在