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

MinIO - 服务端签名直传（前端 + 后端 + 效果演示）

news 2026/5/19 3:26:40

目录

开始

服务端签名直传概述

代码实现

后端实现

前端实现

效果演示

开始

服务端签名直传概述

传统的，我们有两种方式将图片上传到 OSS：

a）前端请求 -> 后端服务器 -> OSS 

好处：在服务端上传，更加安全.

坏处：给服务器带来压力.

b）直接写在前端 js 代码中

好处：效率高，不用给服务器带来额外压力.

坏处：危险，用户直接可以看得到 OSS账号密码 信息.

因此最好的方式就是 服务端签名直传：用户直接去服务器请求获取上传签名（账号密码加密生成的防伪签名，一般有过期时间），服务器就返回防伪签名，然后用户就可以拿着签名和要上传的文件，通过表单直接上传到 OSS 中.

此时既不需要服务端承担上传文件到 OSS 中的压力，也保证了 OSS账号密码 信息的安全性.

代码实现

后端实现

a）配置文件

minio:access-key: rootsecret-key: rootrootendpoint: http://100.105.180.32:9001bucket: dir1

b）Bean 配置 

import org.springframework.context.annotation.Configuration
import io.minio.MinioClient
import org.springframework.beans.factory.annotation.Value
import org.springframework.context.annotation.Bean@Configuration
class MinioConfig {@Value("\${minio.access-key}")private lateinit var accessKey: String@Value("\${minio.secret-key}")private lateinit var secretKey: String@Value("\${minio.endpoint}")private lateinit var endpoint: String@Beanfun minioClient(): MinioClient = MinioClient.builder().endpoint(endpoint) //格式必须是 http://ip:port  注意: 这里使用的 9001 端口，而不是 9000.credentials(accessKey, secretKey) //用户名 和 密码.build()}

c）核心代码

@RestController
@RequestMapping("/third/minio")
class MinioApi(private val minioClient: MinioClient
) {@Value("\${minio.endpoint}")private lateinit var endpoint: String@Value("\${minio.bucket}")private lateinit var bucket: String@GetMapping("/policy")fun policy(): Map<String, String> {val objectNamePrefix =  "uploads/"// 设置过期时间为当前时间加1小时val expiration = ZonedDateTime.now().plusHours(1)val postPolicy = PostPolicy(bucket, expiration)postPolicy.run {//添加条件，确保字段的值以指定前缀开头，前端指定 key 时，也需要加上该前缀，否则 403addStartsWithCondition("key", objectNamePrefix)//添加条件，将文件大小范围限制在 1 ~ 10485760 (1 到 10 MB)addContentLengthRangeCondition(1, 10485760)}val result = minioClient.getPresignedPostFormData(postPolicy).apply {//这里是给前端构造 Minio 请求的this["url"] = "$endpoint/$bucket"}return result}}

前端实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Minio File Upload</title>
</head>
<body>
<h2>Minio 文件上传</h2>
<input type="file" id="fileInput" />
<button onclick="uploadFile()">上传</button><script>async function uploadFile() {const fileInput = document.getElementById('fileInput');if (!fileInput.files.length) {alert('请选择文件');return;}const file = fileInput.files[0];const response = await fetch('http://localhost:10010/third/minio/policy');const formData = await response.json();const data = new FormData();for (const [key, value] of Object.entries(formData)) {data.append(key, value);}// 构建对象键(这里一定要和 后端 那里的设定的前缀一致，否则 403)const objectName = 'uploads/' + file.name;data.append('key', objectName);data.append('file', file);// 上传 URLconst uploadUrl = formData['url'];const uploadResponse = await fetch(uploadUrl, {method: 'POST',body: data,});if (uploadResponse.ok) {alert('上传成功');} else {alert('上传失败');}}
</script>
</body>
</html>

效果演示

a）点击选择文件，选择 mongo.png

b）点击上传

c）返回 MinIO 控制台，就可以看到文件已经长传成功~

相关文章：

MinIO - 服务端签名直传（前端 + 后端 + 效果演示）

目录 开始 服务端签名直传概述 代码实现 后端实现 前端实现 效果演示 开始 服务端签名直传概述 传统的&#xff0c;我们有两种方式将图片上传到 OSS&#xff1a; a&#xff09;前端请求 -> 后端服务器 -> OSS 好处&#xff1a;在服务端上传&#xff0c;更加安全…...

编程日记 2024/7/12 4:06:24

使用getopt处理参数

文章目录 使用getopt处理参数1. shift 命令1.1 删除一个参数1.2 删除多个参数1.3 多次执行 shift 参数1.4 参数解析示例1.5 优化处理1.6 问题处理 2. getopt 命令2.1 常用参数及示例2.2 脚本参数优化示例2.3 参数校验 3. 示例展示4. eval 命令4.1 示例示例 1示例 2示例 3示例 4…...

编程日记 2024/7/12 4:05:23

图像搜索技术在司法证据分析中的应用：思通数科大模型的创新实践

引言 在司法侦查过程中&#xff0c;图像和视频证据的分析对于案件的侦破至关重要。随着人工智能技术的快速发展&#xff0c;图像搜索技术已成为司法领域的关键工具。本文将探讨如何结合思通数科的大模型&#xff0c;利用图像搜索技术对案件中的图片或视频证据进行深度分析&…...

编程日记 2024/7/12 4:02:20

python使用多进程，传入多个参数？

先展示一下我的多进程代码&#xff1a; def process_image(image_path_list):# 获取模板以及类别名template_feature {}template_image cv2.imread(image_path_list)template_feature[curr_template_name] template_imageinput_image cv2.imread(img)template_feature[inp…...

编程日记 2024/7/12 3:58:16

李彦宏: 开源模型是智商税｜马斯克: OpenAI 闭源不如叫 CloseAI

在 2024 年世界人工智能大会&#xff08;WAIC 2024&#xff09;上&#xff0c;百度创始人、董事长兼首席执行官李彦宏发表对开源模型的评价。 李彦宏认为&#xff1a;开源模型实际上是一种智商税&#xff0c;而闭源模型才是人工智能&#xff08;AI&#xff09;行业的未来。 马…...

编程日记 2024/7/12 3:57:15

怎么参与场外期权？场外期权交易要注意什么？

今天带你了解怎么参与场外期权&#xff1f;场外期权交易要注意什么&#xff1f;场外期权&#xff08;OTC Options&#xff09;是指在交易所之外进行的期权交易。与场内期权&#xff08;交易所挂牌交易&#xff09;不同&#xff0c;场外期权交易由交易双方私下协商确定合约条款&…...

编程日记 2024/7/12 3:56:14

Postman脚本炼金术：高级数据处理的秘籍

&#x1f916; Postman脚本炼金术&#xff1a;高级数据处理的秘籍 Postman不仅是API测试的强大工具&#xff0c;它的脚本功能同样能够在数据处理方面大放异彩。无论是在请求之前设置环境&#xff0c;还是测试后验证结果&#xff0c;Postman的脚本都能提供强大的数据处理能力。…...

编程日记 2024/7/12 3:55:14

MySQL字符串相关数据处理函数

目录 1. 转大小写 2. 截取字符串 sunstr 3. 获取字符长度 4. 字符串拼接 concat 5. 去掉空白 trim 1. 转大小写 转大写&#xff1a;upper() 转小写&#xff1a;lower() 虽然MySQL不严格区分大小写&#xff0c;但是我们还是需要掌握这种大小写的操作以方便学习其他…...

编程日记 2024/7/12 3:52:11

最近查看了一些批处理文件的写法，整理了一些基础的命令符，大佬勿喷

1.Echo 命令 打开回显或关闭请求回显功能&#xff0c;或显示消息。 2. 命令 表示不显示后面的命令,但是会显示结果 3.Goto和&#xff1a; 命令 &#xff1a;定义标签&#xff0c;goto跳转到标签 4.Rem ::注释命令 ::不显示不执行&#xff0c;rem显示不执行 5.Pause 命令 暂停命…...

编程日记 2024/7/12 3:50:10

解决 Yarn 运行时的 Node.js 版本问题：一个详尽的指南

引言 Yarn 是一个流行的 JavaScript 包管理器&#xff0c;它与 Node.js 紧密集成&#xff0c;用于管理项目依赖。然而&#xff0c;在开发过程中&#xff0c;开发者可能会遇到 Node.js 版本不兼容的问题&#xff0c;这会导致 Yarn 运行时出错。本文将提供一个详细的指南&#x…...

编程日记 2024/7/12 3:48:08

SQL基础-DQL 小结

SQL基础-DQL 小结 学习目标&#xff1a;学习内容&#xff1a;SELECTFROMWHEREGROUP BYHAVINGORDER BY运算符ASC 和 DESC 总结 学习目标&#xff1a; 1.理解DQL&#xff08;Data Query Language&#xff09;的基本概念和作用。 2.掌握SQL查询的基本语法结构&#xff0c;包括SEL…...

编程日记 2024/7/12 3:47:07

冒泡排序与其C语言通用连续类型排序代码

冒泡排序与其C语言通用连续类型排序代码 冒泡排序冒泡排序为交换排序的一种&#xff1a;动图展示&#xff1a;冒泡排序的特性总结&#xff1a;冒泡排序排整型数据参考代码&#xff08;VS2022C语言环境&#xff09;&#xff1a; 冒泡排序C语言通用连续类型排序代码对比较的方式更…...

编程日记 2024/7/12 3:44:04

Python爬虫并输出

1. Python爬虫并输出示例 下面是一个使用Python编写的简单网络爬虫示例&#xff0c;该爬虫将抓取某个网页&#xff08;例如&#xff0c;我们假设为https://example.com&#xff0c;但请注意实际使用时我们需要替换为一个真实且允许抓取的网站&#xff09;的标题&#xff08;Ti…...

编程日记 2024/7/12 3:42:02

交叉熵损失函数的使用目的（很肤浅的理解）

第一种使用方法 import torch from torch import nn # Example of target with class indices loss nn.CrossEntropyLoss() input torch.randn(3, 5, requires_gradTrue) target torch.empty(3, dtypetorch.long).random_(5) output loss(input, target) output.backward(…...

编程日记 2024/7/12 3:38:59

MySQL：TABLE_SCHEMA及其应用

MySQL TABLE_SCHEMA及其应用 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/ar…...

编程日记 2024/7/12 3:37:58

【MySQL】4.MySQL 的数据类型

MySQL 的数据类型 一.数据类型分类在这里插入图片描述二.注意点1.char VS varchar2.datetime VS timestamp3.enum 和 set 的使用方法 一.数据类型分类 二.注意点 1.char VS varchar char 的意义是直接开辟固定大小的空间&#xff0c;浪费磁盘空间&#xff0c;但是效率高varcha…...

编程日记 2024/7/12 3:36:57

STM32中断（NVIC和EXIT）

CM3 内核支持 256 个中断&#xff0c;其中包含了 16 个内核中断和 240个外部中断&#xff0c;并且具有 256 级的可编程中断设置。但STM32 并没有使用CM3内核的全部东西&#xff0c;而是只用了它的一部分。STM32有 76 个中断&#xff0c;包括16 个内核中断和 60 个可屏蔽中断&am…...

编程日记 2024/7/12 3:35:55

哈弗架构和冯诺伊曼架构

文章目录 1. 计算机体系结构 2. 哈弗架构&#xff08;Harvard Architecture&#xff09; 3. 改进的哈弗架构 4. 冯诺伊曼架构&#xff08;Von Neumann Architecture&#xff09; 5. 结构对比 1. 计算机体系结构 计算机体系结构是指计算机系统的组织和实现方式&#xff0c…...

编程日记 2024/7/12 3:33:53

Python实现动态迷宫生成：自动生成迷宫的动画

文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame定义迷宫生成类主循环 完整代码 引言 迷宫生成算法在游戏开发和图形学中有着广泛的应用。它不仅可以用于创建迷宫游戏&#xff0c;还可以用于生成有趣的图案。在这篇博客中&#xff0c;我们将使用Python…...

编程日记 2024/7/12 3:27:47

大学生暑假“三下乡”社会实践工作新闻投稿指南请查收！

近年来&#xff0c;大学生暑期“三下乡”社会实践工作方兴未艾&#xff0c;越来越多的大学生通过参与“三下乡”实践工作&#xff0c;走出校园&#xff0c;深入基层&#xff0c;体验农村生活&#xff0c;服务农民&#xff0c;促进农村经济社会发展&#xff0c;实现了理论与实践…...

编程日记 2024/7/12 3:26:47

LangChain实战：从零构建RAG应用与模块化开发指南

1. 项目概述&#xff1a;LangChain示例库的实战价值如果你最近在尝试用大语言模型&#xff08;LLM&#xff09;构建应用&#xff0c;大概率会听到“LangChain”这个名字。它就像一个乐高积木的百宝箱&#xff0c;把调用LLM、连接外部数据、管理对话记忆这些复杂任务&#xff0c…...

编程新知 2026/5/19 1:54:21

Windows Node.js版本管理实战：NVM-Windows配置与部署解决方案

Windows Node.js版本管理实战&#xff1a;NVM-Windows配置与部署解决方案 【免费下载链接】nvm-windows A node.js version management utility for Windows. Ironically written in Go. 项目地址: https://gitcode.com/gh_mirrors/nv/nvm-windows NVM-Windows是Windows…...

编程新知 2026/5/19 1:43:29

python系列【仅供参考】：避开这些坑！用Python爬取IEEE Xplore论文信息时，我的防反爬与数据清洗实战记录

避开这些坑！用Python爬取IEEE Xplore论文信息时，我的防反爬与数据清洗实战记录 避开这些坑！用Python爬取IEEE Xplore论文信息时，我的防反爬与数据清洗实战记录----------避开这些坑！用Python爬取IEEE Xplore论文信息时，我的防反爬与数据清洗实战记录 1. 反爬机制：不只是…...

编程新知 2026/5/19 1:19:32

终极罗技鼠标宏指南：3步实现PUBG完美压枪

终极罗技鼠标宏指南&#xff1a;3步实现PUBG完美压枪 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 还在为《绝地求生》中难以控制的武器后坐力…...

编程新知 2026/5/19 1:11:17

Linux 安全 - 从SUID到Capabilities：细粒度权限控制的演进与实践

1. 从SUID到Capabilities&#xff1a;权限控制的进化史 记得我第一次接触Linux权限管理时&#xff0c;被那个神秘的SUID位搞得晕头转向。当时为了给团队搭建一个共享日志分析工具&#xff0c;需要让普通用户能够读取/var/log下的敏感日志文件。老同事建议我"给那个脚本加个…...

编程新知 2026/5/18 23:59:24

基于SpringBoot的共享汽车管理系统毕设源码

博主介绍&#xff1a;✌ 专注于Java,python,✌关注✌私信我✌具体的问题&#xff0c;我会尽力帮助你。一、研究目的本研究旨在构建一个基于Spring Boot与Vue框架的共享汽车管理系统以解决当前共享汽车行业在资源调度效率、用户服务体验以及数据安全等方面存在的核心问题。随着城…...

编程新知 2026/5/18 23:35:30

哔哩下载姬完整指南：三步快速掌握B站视频批量下载技巧

哔哩下载姬完整指南&#xff1a;三步快速掌握B站视频批量下载技巧 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等&#…...

编程新知 2026/5/18 20:03:11

ElevenLabs动画配音语音交付危机预警，紧急修复唇动不同步、语速断层、多语言混读错位的6大实时响应方案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs动画配音语音交付危机的本质溯源 当动画制作团队依赖 ElevenLabs API 实时生成角色语音时&#xff0c;突然出现的 429 Too Many Requests 响应、TTS 音频静音片段、以及语音情感断层现象&…...

编程新知 2026/5/18 19:20:25

瑞萨RL78/G16开发板与EZ-CUBE3仿真器连接调试全攻略

1. 项目概述与核心价值 最近在折腾瑞萨的RL78系列MCU&#xff0c;手头正好有一块RL78/G16的快速原型开发板和一个EZ-CUBE3仿真器。对于刚接触瑞萨生态的朋友来说&#xff0c;如何把这套硬件正确地连接起来&#xff0c;并成功跑通第一个LED闪烁程序&#xff0c;往往是入门路上的…...

编程新知 2026/5/18 19:03:43

终极节点图绘制工具：Project Graph让你的思维可视化变得简单高效

终极节点图绘制工具&#xff1a;Project Graph让你的思维可视化变得简单高效 【免费下载链接】project-graph A node-based visual tool for organizing thoughts and notes in a non-linear way. 项目地址: https://gitcode.com/gh_mirrors/pr/project-graph 还在为复杂…...

编程新知 2026/5/18 18:18:15