[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个问题。谢谢观看。

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

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

相关文章

opera打不开网页最简单的解决办法

如果以上为解决问题&#xff0c;继续下面操作 检查网络连接&#xff1a; 确认您的电脑已连接到互联网。 检查网络连接是否稳定&#xff0c;网络速度慢或链路拥堵可能会导致网页加载失败。 修改Local State文件&#xff1a; 关闭Opera浏览器。 定位到Opera浏览器的配置…

【Mtk Camera开发学习】05 MTK Camera 多帧开启、关闭

本专栏内容针对 “知识星球”成员免费,欢迎关注公众号:小驰行动派,加入知识星球。 #MTK Camera开发学习系列 #小驰私房菜 多帧默认是开启的,正式版本编译,可以通过修改ProjectCofig.mk进行配置。本地临时调试,也可以通过adb命令控制。 ===============================…

植物大战僵尸杂交版2024潜艇伟伟迷

在广受欢迎的游戏《植物大战僵尸》的基础上&#xff0c;我最近设计了一款创新的杂交版游戏&#xff0c;简直是太赞了&#xff01;这款游戏结合了原有游戏的塔防机制&#xff0c;同时引入新的元素、角色和挑战&#xff0c;为玩家提供了全新的游戏体验。 植物大战僵尸杂交版最新绿…

使用cv2控制鼠标实现circle的拖拽

2.代码 import numpy as np import cv2x_center [100,200,300,400] y_center [200,200,200,200] radius 30def mouse_LButtonDown(event, x, y, flags, param):global tempif event cv2.EVENT_LBUTTONDOWN:print(f" Down Clicked at ({x}, {y})")for i in range…

【leetcode】LRU LFU

什么是LRU算法? LRU是Least Recently Used的缩写&#xff0c;即最近最少使用&#xff0c;常用于页面置换算法&#xff0c;是为虚拟页式存储管理服务的。 关于操作系统的内存管理&#xff0c;如何节省利用容量不大的内存为最多的进程提供资源&#xff0c;一直是研究的重要方向。…

算法设计与分析-分支限界

问题A: 分支限界法-单源最短路径问题 题目描述 已知一个加权有向图&#xff08;为了计算方便&#xff0c;假设编号为1的顶点是入度为0的源点&#xff0c;编号为n的顶点是出度为0的汇点&#xff0c;图中的顶点从1开始编号&#xff09;&#xff0c;要求计算图中从源点出发到汇点…

武汉理工大学云计算与服务计算——6.虚拟化技术习题

20世纪60年代IBM公司推出虚拟化技术 虚拟化技术的核心思想是利用软件或固件管理程序构成虚拟化层&#xff0c;把物理资 源映射为虚拟资源。 在虚拟资源上可以安装和部署多个虚拟机&#xff0c;实现多用户 共享物理资源。 1&#xff0e;虚拟化技术在云计算中的哪些地方发挥了关…

SpringBoot图书管理系统【附:资料➕文档】

前言&#xff1a;我是源码分享交流Coding&#xff0c;专注JavaVue领域&#xff0c;专业提供程序设计开发、源码分享、 技术指导讲解、各类项目免费分享&#xff0c;定制和毕业设计服务&#xff01; 免费获取方式--->>文章末尾处&#xff01; 项目介绍048&#xff1a; 图…

自然语言处理(NLP)—— 符号方法与符号语言

1. 符号方法 1.1 雅各布森的结构主义 雅各布森的结构主义是一种语言学理论&#xff0c;它强调了语言结构中的两个基本维度&#xff1a;轴与范畴。这两个维度是理解雅各布森结构主义的核心概念。 1.1.1 轴向对立 句法轴&#xff08;Syntagmatic Axis&#xff09;&#xff1a;这…

【ARM Cache 与 MMU 系列文章 7.7 – ARMv8/v9 MMU Table 表分配原理及其代码实现 1】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 MMU Table 表分配原理及其代码实现虚拟地址空间 Region的配置系统物理地址位宽获取汇编代码实现MMU Table 表分配原理及其代码实现 假设当前系统中需要映射多个region,其中第一个要映…

【Linux】进程4——进程状态

1.进程状态 什么是状态&#xff1f; 每个人都有状态——颓废&#xff0c;阳光&#xff0c;积极向上。。。。 进程也有状态 在操作系统中&#xff0c;由于进程的数量是非常多的&#xff0c;而系统的资源又非常少&#xff0c;所以不可能每一个进程在每时每刻都会处于上处理机运…

【python报错】list indices must be integers or slices, not tuple

【Python报错】list indices must be integers or slices, not tuple 在Python中&#xff0c;列表&#xff08;list&#xff09;是一种常用的数据结构&#xff0c;用于存储一系列的元素。当你尝试使用不支持的索引类型访问列表元素时&#xff0c;会遇到list indices must be in…

OS复习笔记ch7-3

承接上文我们讲完了页式管理和段式管理&#xff0c;接下来让我们深入讲解一下快表和二级页表 快表 快表和计算机组成原理讲的Cache原理如出一辙。为了减少访存的次数&#xff0c;OS在访问页面的时候创建了快表&#xff08;Translation Lookaside Buffer &#xff0c;简称TLB&…

pikachu靶场全流程

目录​​​​​​​ 暴力破解&#xff1a; 1.基于表单的暴力破解&#xff1a; 2.验证码绕过(on server)&#xff1a; 3.验证码绕过(on client)&#xff1a; token防爆破&#xff1a; XSS&#xff1a; 1.反射型xss(get)&#xff1a; 2.反射性xss(post)&#xff1a; 3.存…

354. 俄罗斯套娃信封问题

Problem: 354. 俄罗斯套娃信封问题 文章目录 思路解题方法复杂度Code 思路 这个问题可以转换为最长递增子序列&#xff08;Longest Increasing Subsequence&#xff0c;LIS&#xff09;问题。先对信封按宽度升序排序&#xff0c;当宽度相同时&#xff0c;按高度降序排序。然后在…

Elasticsearch之写入原理以及调优

1、ES 的写入过程 1.1 ES支持四种对文档的数据写操作 create&#xff1a;如果在PUT数据的时候当前数据已经存在&#xff0c;则数据会被覆盖&#xff0c;如果在PUT的时候加上操作类型create&#xff0c;此时如果数据已存在则会返回失败&#xff0c;因为已经强制指定了操作类型…

RPA影刀 | 设置当前时间

1. 新建流程 2. 创建指令 指令1&#xff1a;获取当前日期时间 指令3&#xff1a;日期时间转文本 %Y&#xff1a;年 %m&#xff1a;月 %d&#xff1a;日期 其他字符自由添加。 常用格式如下&#xff1a; %Y年%m月%d日%Y-%m-%d%Y_%m_%d%Y%m%d 3. 运行流程

【办公类-04-02】华为助手导出照片读取拍摄时间分类导出,视频不行)

背景需求 今天我用QQ相册导出照片&#xff0c;但是始终在转圈&#xff0c;手机上无法跳出“连结“”的提示&#xff0c;换了台式和笔记本都无法传输。&#xff08;明明5月14日还可以导出的&#xff09; 最后我只能用华为传输助手&#xff0c;把照片快速提取出来了。 使用原来…

从记忆到想象:探索AI的智能未来

引言 人工智能&#xff08;AI&#xff09;在信息处理、数据分析和任务自动化等方面展现了强大的能力。然而&#xff0c;在人类独有的记忆和想象力领域&#xff0c;AI仍然有很长的路要走。加利福尼亚大学戴维斯分校的心理学和神经科学教授查兰兰加纳特&#xff08;Charan Ranga…

STM32编程:实现LED灯闪烁(基于手写SDK的方式)

项目结构 stm32f10x.h 文件 //寄存器的值常常是芯片外设自动更改的&#xff0c;即使CPU没有执行程序&#xff0c;也有可能发生变化 //编译器有可能会对没有执行程序的变量进行优化//volatile表示易变的变量&#xff0c;防止编译器优化&#xff0c; #define __IO volati…