当前位置: 首页 > 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个问题。谢谢观看。

相关文章:

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

前言 ssi-uploader是一款非常好用的多文件上传插件&#xff0c;源码是开源的&#xff0c;在github上面即可下载&#xff1a; https://github.com/ssbeefeater/ssi-uploader 但是源码有些微小的不足&#xff0c;今天我们解决两点问题&#xff1a; 上传文件完成后&#xff0c…...

InfiniGate自研网关实现思路七

25.网关Nginx负载模型配置 通过模拟多个HTTP服务配置到 Nginx 做负载均衡&#xff0c;以学习API网关负载的配置和使用 API 网关是用于支撑分布式 RPC 接口协议转换提供 HTTP 调用的一套服务&#xff0c;那么 API 网关系统就需要可横向扩展来满足系统的吞吐量诉求。所以这里需…...

277 基于MATLAB GUI火灾检测系统

基于MATLAB GUI火灾检测系统&#xff0c;可以实现图片和视频的火苗检测。火焰识别的三个特征&#xff1a;1个颜色特征&#xff0c;2个几何特征颜色特征&#xff1a;HSV颜色空间下&#xff0c;对三个通道值进行阈值滤波&#xff0c;几何特征1&#xff1a;长宽比&#xff0c;几何…...

【西瓜书】4.决策树

1 递归返回情况 &#xff08;1&#xff09;结点包含样本全为同一类别 &#xff08;2&#xff09;属性集为空&#xff0c;没有属性可供划分了 或 有属性&#xff0c;但是在属性上划分的结果都一样 &#xff08;3&#xff09;结点为空结点 **结束时判定该结点的类别遵循如下规则&…...

区块链--Ubuntu上搭建以太坊私有链

1、搭建私链所需环境 操作系统&#xff1a;ubuntu16.04&#xff0c;开虚拟机的话要至少4G&#xff0c;否则会影响测试挖矿时的速度 软件&#xff1a; geth客户端 Mist和Ethereum Wallet&#xff1a;Releases ethereum/mist GitHub 2、安装geth客户端 sudo apt-get update …...

菜品信息分页查询——后端SpringBoot

1.分页查询的逻辑&#xff1a; 页面发送ajax请求&#xff0c;将分页查询参数(page&#xff0c;pageSize, name)提交到服务端&#xff0c;获取分页数据&#xff1b; 页面发送请求&#xff0c;请求服务端进行图片下载&#xff0c;用于页面图片展示。 开发菜品信息分页查询功能&a…...

利用GPT和PlantUML快速生成UML图用于设计

在软件开发中&#xff0c;设计阶段可是关键的一步。UML&#xff08;统一建模语言&#xff09;图能帮我们更清晰地理解和规划系统结构&#xff0c;但手动画UML图有时会很费时费力。好消息是&#xff0c;通过结合使用ChatGPT和PlantUML&#xff0c;我们可以高效地生成UML图&#…...

web-上传项目文件夹到Git远程仓库

Git初识 概念&#xff1a;一个免费开源&#xff0c;分布式的代码版本控制系统&#xff0c;帮助开发团队维护代码 作用&#xff1a;记录代码内容&#xff0c;切换代码版本&#xff0c;多人开发时高效合并代码内容 检验成功 打开bash终端&#xff08;git专用&#xff09;命令…...

使用OpenPCDet训练与测试Transformer模型:如何加载自己的数据集

引言 Transformer架构因其强大的序列处理能力和长距离依赖捕捉能力&#xff0c;在自然语言处理领域取得了巨大成功。近年来&#xff0c;这一架构也被引入3D物体检测领域&#xff0c;如Voxel Transformer等&#xff0c;显著提升了模型在复杂场景下的检测性能。OpenPCDet整合了多…...

四舍五入问题

单纯输出四舍五入可以用 printf("%.nf",num); 但是这个方法有时候会出错 代表输出n位四舍五入小数 而将数四舍五入赋值给变量可以用round&#xff08;&#xff09;函数 a round(num); 表示将num四舍五入赋值给a 但是这么些只能转换位四舍五入的整数 可以改…...

零基础入门学用Arduino 第一部分(三)

重要的内容写在前面&#xff1a; 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后&#xff0c;整体感觉是很好的&#xff0c;如果有条件的可以先学习一些相关课程&#xff0c;学起来会更加轻松&#xff0c;相关课程有数字电路…...

C++标准库random

random 完整文档看这里 三步走: 选择一种随机数种子选择一个随机数引擎选择一个随机数分布输出 随机数种子 //生成随机数种子,在Linux的实现中,是读取/dev/urandom设备 std::random_device rd; unsigned seed1 rd();// 获取当前时间点作为随机数种子 unsigned seed2 std:…...

电子电气架构——车载诊断DTC一文通

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕的就是把别人的眼光当成自己生活的唯一标…...

Golang | Leetcode Golang题解之第129题求根节点到叶节点数字之和

题目&#xff1a; 题解&#xff1a; type pair struct {node *TreeNodenum int }func sumNumbers(root *TreeNode) (sum int) {if root nil {return}queue : []pair{{root, root.Val}}for len(queue) > 0 {p : queue[0]queue queue[1:]left, right, num : p.node.Left, …...

工业信息化SCI期刊,中科院1区TOP,IF=12.3,收稿范围广泛

一、期刊名称 IEEE Transactions on Industrial Informatics 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;工程工业 影响因子&#xff1a;12.3 中科院分区&#xff1a;1区TOP 三、期刊征稿范围 IEEE工业信息学汇刊是一本多学科期刊&#xff0c;发表技…...

Spring Boot整合Redis

Spring Boot整合Redis Spring Boot 整合 Redis 是一种常见的做法&#xff0c;用于在 Spring Boot 应用程序中添加缓存、会话管理分布式锁等功能。 浅谈Redis Redis用于存储数据&#xff0c;且在内存当中进行存储。 但是在日常编写代码时&#xff0c;定义一个变量也就是属于在内…...

kafka的leader和follower

leader和follower kafka的leader和follower是相对于分区有意义的&#xff0c;不是相对于broker。 因为每个分区都有leader和follower, leader负责读写数据。 follower负责复制leader的数据保存到自己的日志数据中&#xff0c;并在leader挂掉后重新选举出leader。 kafka会再…...

git 空仓库笔记

标识身份&#xff0c;建议先完成 Git 全局设置 git config --global user.name “账号” git config --global user.email “email” 方式一&#xff1a;克隆仓库 git clone https://url/your.git cd your_path touch README.md git add README.md git commit -m "add …...

字母异位词分组(charyw)

字母异位词分组 题目描述 给定一个字符串数组&#xff0c;将字母异位词组合在一起。字母异位词指字母相同&#xff0c;但排列不同的字符串。 输入格式 第一行正整数n&#xff0c;表示有n个字符串(1<n<1000) 第二行n个字符串&#xff0c;空格隔开 输出格式 多组字母…...

力扣 41.缺少的第一个正整数

题目描述&#xff1a; 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 解释&#xff1a;范围 …...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...