[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浏览器的配置…

植物大战僵尸杂交版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…

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

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

【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.存…

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…

Linux(Rocky)下 如何输入中文(切换中文输入法)教程

RockyLinux如何输入中文&#xff08;切换中文输入法&#xff09; 注意 在字符画界面的Linux系统中 默认不具备中文输入法的功能 需要SSH或其他远程工具来实现 问题 可能大家有的时候安装了一个虚拟机之后 想切换中文输入法 但是一直找不到方法 下面将利用Rocky9.2作为演示…

Failed to build causal-conv1d -- 离线安装(mamba_ssm)

Building wheels for collected packages: causal-conv1d Building wheel for causal-conv1d (setup.py) … error error: subprocess-exited-with-error python setup.py bdist_wheel did not run successfully. │ exit code: 1 ╰─> [8 lines of output] torch.__versi…

苹果将推出“Apple Intelligence”AI系统,专注于隐私和广泛应用|TodayAI

据彭博社报道&#xff0c;苹果公司将在下周的 WWDC 2024 开发者大会上揭晓其全新的 AI 系统——“Apple Intelligence”&#xff0c;该系统将适用于 iPhone、iPad 和 Mac 设备。这一新系统将结合苹果自身技术和 OpenAI 的工具&#xff0c;为用户提供一系列新的 AI 功能&#xf…

独立游戏之路 -- TapTap广告收益损失和常见问题

一个操作带来的TapTap广告收益损失 一,收益损失1.1 广告入口1.2 损失对比二,常见问题2.1 有展现量没有预估收益 /eCPM 波动大?2.2 新建正式媒体找不到预约游戏2.3 聚合模式由于没有回传 oaid 无数据2.4 每日观看次数限制是否有限制一,收益损失 1.1 广告入口 TapTap广告联…

【JAVASE】日期与时间类(下)

三&#xff1a;LocalDateTime 相当于LocalDate类&#xff0c;在LocalDateTime类的对象中还可以封装时、分、秒和纳秒&#xff08;1纳秒是1秒的十亿分之一&#xff09;等时间类型。 例如&#xff0c;创建LocalDateTime对象 &#xff0c; LocalDateTime date LocalDateTi…

动手学深度学习29 残差网络ResNet

动手学深度学习29 残差网络ResNet ResNet代码ReLU的两种调用1. 使用 torch.nn.ReLU 模块2. 使用 torch.nn.functional.relu 函数总结 QA29.2 ResNet 为什么能训练处1000层的模型ResNet的梯度计算怎么处理梯度消失的 QA ResNet 更复杂模型包含小模型&#xff0c;不一定改进&…

Shell以及Shell编程

Shell的任务 ①分析命令&#xff1b; ②处理通配符、变量替换、命令替换、重定向、管道和作业控制&#xff1b; ③搜索命令并执行。 内部命令&#xff1a;内嵌在Shell中。 外部命令&#xff1a;存在于磁盘上的独立可执行文件。 #&#xff01;/bin/bash #! 称为一个幻数&…