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

目录

开始

服务端签名直传概述

代码实现

后端实现

前端实现

效果演示


开始


服务端签名直传概述

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

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

好处:在服务端上传,更加安全.

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

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

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

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

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

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

代码实现

后端实现

a)配置文件

minio:
  access-key: root
  secret-key: rootroot
  endpoint: http://100.105.180.32:9001
  bucket: 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

    @Bean
    fun 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 时,也需要加上该前缀,否则 403
            addStartsWithCondition("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);

        // 上传 URL
        const 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 控制台,就可以看到文件已经长传成功~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【智能算法改进】一种混合多策略改进的麻雀搜索算法

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.改进点 精英反向学习策略 将精英反向学习策略应用到初始化阶段, 通过反向解的生成与精英个体的选择, 不仅使算法搜索范围得到扩大, 提…

DELTA: DEGRADATION-FREE FULLY TEST-TIME ADAPTATION--论文笔记

论文笔记 资料 1.代码地址 2.论文地址 https://arxiv.org/abs/2301.13018 3.数据集地址 https://github.com/bwbwzhao/DELTA 论文摘要的翻译 完全测试时间自适应旨在使预训练模型在实时推理过程中适应测试数据流&#xff0c;当测试数据分布与训练数据分布不同时&#x…

苹果笔记本电脑能玩哪些游戏 苹果电脑可以玩的单机游戏推荐

苹果笔记本有着优美的外观和强大的性能。用户不仅可以使用苹果笔记本办公、剪辑&#xff0c;越来越多的用户开始关注苹果笔记本在游戏领域的表现&#xff0c;尤其是在大型游戏方面。本文将为你详细介绍苹果笔记本都能玩什么游戏&#xff0c;以及为你推荐苹果电脑可以玩的单机游…

tesla p100显卡显示资源不足,api调用失败

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

进程间的通信--管道

文章目录 一、进程通信的介绍1.1进程间为什么需要通信1.2进程如何通信 二、管道2.1匿名管道2.1.1文件描述符理解管道2.1.2接口使用2.1.3管道的4种情况2.1.4管道的五种特征 2.2管道的使用场景2.2.1命令行中的管道2.2.2进程池 2.命名管道2.1.1原理2.2.2接口2.2.3代码实例 一、进程…

C++初阶:类与对象(一)

✨✨所属专栏&#xff1a;C✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 类的定义 定义格式 • class为定义类的关键字&#xff0c;后面跟类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后⾯分号不能省略。类体中内容称为类的成员&#xff1b;类中的变量称为类的…

设计模式之职责链模式

1. 职责链模式&#xff08;Chain of Responsibility Pattern&#xff09; 在职责链模式中&#xff0c;多个处理器依次处理同一个请求。一个请求先经过 A 处理器处理&#xff0c;然后再把请求传递给 B 处理器&#xff0c;B处理器处理完后再传递给 C 处理器&#xff0c;以此类推&…

【Android组件】封装加载弹框

&#x1f4d6;封装加载弹框 ✅1. 构造LoadingDialog✅2. 调用LoadingDialog 效果&#xff1a; ✅1. 构造LoadingDialog 构造LoadingDialog类涉及到设计模式中的建造者模式&#xff0c;进行链式调用&#xff0c;注重的是构建的过程&#xff0c;设置需要的属性。 步骤一&#x…

基于考研题库小程序V2.0实现倒计时功能板块和超时判错功能

V2.0 需求沟通 需求分析 计时模块 3.1.1、功能描述←计时模块用于做题过程中对每一题的作答进行30秒倒计时&#xff0c;超时直接判错&#xff0c;同时将总用时显示在界面上;记录每次做题的总用时。 3.1.2、接口描述←与判定模块的接口为超时判定&#xff0c;若单题用时超过 …

C++:缺省参数|函数重载|引用|const引用

欢迎来到HarperLee的学习笔记&#xff01; 博主主页传送门&#xff1a;HarperLee的博客主页 想要一起进步的uu可以来后台找我哦&#xff01; 一、缺省参数 1.1 缺省参数的定义 缺省参数&#xff1a;是声明或定义函数时为函数的参数指定⼀个缺省值。在调用该函数时&#xff0c;…

MYSQL数据库建表规则及注意事项

数据类型以及应用场景 数值类型 TINYINT&#xff1a;使用在 0~1 SMALLINT&#xff1a;使用在2~10 INT&#xff1a;常用 BIGINT&#xff1a;使用在用户ID等更大范围的整数 DECIMAL&#xff1a;用于存储精确的小数。常用于需要高精度计算的场景&#xff0c;如金融数据处理。 日期…

【UE5.3】笔记10-时间轴的使用

时间轴 右键--Add Timeline(在最下面) --> 双击进入时间轴的编辑界面&#xff1a; 左上角可以添加不同类型的轨道&#xff0c;可以自定义轨道的长度&#xff0c;单位秒&#xff0c;一次可以添加多个 可以通过右键添加关键帧&#xff0c;快捷键&#xff1a;shift鼠标左键按…

JMH325【剑侠情缘3】第2版80级橙武网游单机更稳定亲测视频安装教学更新整合收集各类修改教学补丁兴趣可以慢慢探索

资源介绍&#xff1a; 是否需要虚拟机&#xff1a;是 文件大小&#xff1a;压缩包约14G 支持系统&#xff1a;win10、win11 硬件需求&#xff1a;运行内存8G 4核及以上CPU独立显卡 下载方式&#xff1a;百度网盘 任务修复&#xff1a; 1&#xff0c;掌门任务&#xff08…

MMII 的多模态医学图像交互框架:更直观地理解人体解剖结构和疾病

医生在诊断和治疗过程中依赖于人体解剖图像&#xff0c;如磁共振成像&#xff08;MRI&#xff09;&#xff0c;难以全面捕捉人体组织的复杂性&#xff0c;例如组织之间的空间关系、质地、大小等。然而&#xff0c;实时感知有关患者解剖结构和疾病的多模态信息对于医疗程序的成功…

在mysql中delete和truncated的相同点和区别点

相同点 删除数据&#xff1a;两者都会删除表中的数据。影响数据&#xff1a;两者都不删除表结构&#xff0c;只影响表中的数据。 区别点 操作方式&#xff1a; DELETE&#xff1a;逐行删除数据&#xff0c;可以使用 WHERE 子句来指定删除的条件。如果不加 WHERE 子句&#…

R包:ggsci期刊配色

介绍 不同期刊配色大多数时候不一样&#xff0c;为了更好符合期刊图片颜色的配色&#xff0c;有人开发了ggsci这个R包。它提供以下函数&#xff1a; scale_color_palname() scale_fill_palname() 对应不同期刊的color和fill函数。 导入数据R包 library("ggsci")…

LAZYNVIM学习使用笔记

文章目录 1. 前言VIM的模式快捷键参考 1. 前言 习惯使用vscode进行代码编辑&#xff0c;无意中刷到lazynvim&#xff0c;感觉功能强大&#xff0c;于是下载、安装&#xff0c;学习使用一下&#xff0c;本篇主要记录学习使用lazynvim的一些要点&#xff0c;防止遗忘。 持续更新…

Unity 打包的安卓APK在模拟器运行一会卡死

Unity 安卓APK模拟器运行一会卡死 如题&#xff0c;unity在模拟器上运行安卓apk挂机一会就卡死&#xff0c;在真机上没问题。因为打包时勾选了这个帧率优化选项&#xff0c;2019.2之后的功能&#xff0c;最坑的时打包时默认勾选&#xff0c;所以使用这个版本打包时&#xff0c…

文献阅读(1)——深度强化学习求解车辆路径问题的研究综述

doi&#xff1a; 10.3778/j.issn.1002-8331.2210-0153 深度强化学习求解车辆路径问题的研究综述 (ceaj.org) 组合最优化问题&#xff08; combinatorial optimization problem&#xff0c; COP &#xff09; 日常生活中常见的 COP 问题有旅行商问题&#xff08;traveling sale…

微调Qwen2大语言模型加入领域知识

这里写自定义目录标题 试用Qwen2做推理安装LLaMA-Factory使用自有数据集微调Qwen2验证微调效果 试用Qwen2做推理 参考&#xff1a;https://qwen.readthedocs.io/en/latest/getting_started/quickstart.html from transformers import AutoModelForCausalLM, AutoTokenizer de…