使用Go-Gin框架实现 OSS 前端直传功能

2023-12-31 18:12
文章标签 实现 go 使用 功能 框架 前端 oss frontend gin 直传

本文主要是介绍使用Go-Gin框架实现 OSS 前端直传功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引言

在现代 Web 应用中，文件上传是一项常见功能。传统的上传方式通常需要文件经过后端服务器转发到对象存储服务（如阿里云 OSS）。然而，这种方法可能对服务器造成额外的负担，并降低上传效率。本文将探讨如何使用 Go-Gin 框架实现 OSS 前端直传，从而提高效率并减轻服务器负担。

OSS 前端直传的好处

  • 减少服务器带宽和存储需求：直接上传到 OSS 可以减少服务器流量和存储空间的使用。
  • 提高文件上传速度：文件直接从客户端上传到 OSS，减少了中转时间。
  • 增强数据安全性：文件不经过服务器，降低数据泄露风险。
  • 简化分布式系统的数据管理：当应用采用分布式架构时，直接上传文件到 OSS 可以避免在多个服务器之间同步数据。这种方法减少了分布式环境中数据一致性和同步的复杂性

OSS 设置

在阿里云 OSS 中，首先需要创建一个 Bucket，并设置合适的权限。接着，获取 Access Key ID 和 Access Key Secret，用于后续的 API 调用。我们在获取Access Key ID 和 Access Key Secret时，一定要新建一个新的管理员，这个管理员只可以用来管理OSS，以后就算这个Access Key ID 和 Access Key Secret泄露出去也可以及时补救。此外，我们也要设置合适的 CORS 规则以允许前端直接向 OSS 发送请求。

代码实现

前端代码

我们构建了一个简单的上传界面，用户可以选择文件并点击上传。下面的 JavaScript 代码段展示了上传逻辑：

// 获取上传表单元素
const uploadForm = document.getElementById('upload-form');// 上传文件事件监听
uploadForm.addEventListener('submit', (event) => {event.preventDefault(); // 阻止表单默认提交行为// 获取上传文件const fileInput = document.querySelector('#customFile');const file = fileInput.files[0];// 文件大小验证const maxSize = 5 * 1024 * 1024; // 5MB 的大小限制if(file.size > maxSize) {alert('文件不能超过5MB');return;}// 使用 uuid 库生成 UUIDconst myUUID = uuid.v4(); const secondname = myUUID + '.csv'; // 创建基于 UUID 的文件名const filename = file.name; // 获取原始文件名// 向后端发起请求，获取用于上传文件的签名后的 URLfetch(`/project/upload?filename=${secondname}`, { method: "GET" }).then((response) => response.json()) // 将响应解析为 JSON 格式.then((data) => {const url = data.url; // 从响应中提取签名后的 URL// 使用提取的 URL 和 PUT 方法直接上传文件到 OSSreturn fetch(url, {method: "PUT",headers: new Headers({'Content-Type': 'text/csv', // 设置内容类型为 CSV}),body: file, // 文件内容});});
});

后端 Go-Gin 代码

Controller Layer

UploadToken 函数，位于后端的控制器层（Controller Layer），是整个文件上传功能中的一个关键环节。这个函数的主要职责是处理前端发起的 GET 请求。作为服务器端的一部分，它在申请 OSS（对象存储服务）授权和处理上传逻辑方面发挥着至关重要的作用。以下是其详细的职责描述：

  1. 接收请求和解析参数：作为控制器层的一部分，UploadToken 首先从前端的请求中提取必要的参数，例如文件名。

  2. 调用服务层以获取授权：这个函数进一步将这些参数传递给服务层，这里是与 OSS 交互以申请和获取上传文件所需授权的地方。

  3. 返回授权 URL 给前端：服务层成功获取授权后的 URL，UploadToken 函数则负责将这个 URL 返回给前端。这个 URL 是经过签名的，具有一定的有效期，保障了上传流程的安全性。

  4. 前端使用 URL 完成直传：前端获取到授权后的 URL 后，便可以利用它直接将文件上传到 OSS，从而避免了文件经过后端服务器的需要，提高了上传效率并减轻了服务器的负担。

在整个架构中，UploadToken 函数作为控制器层的组成部分，不仅确保了代码的模块化和清晰的职责划分，还优化了资源的使用和前后端的交互流程，使得文件上传操作更加直接、高效和安全。

// UploadToken 处理前端的上传令牌请求
func UploadToken(c *gin.Context) {filename := c.Query("filename") // 从请求中获取文件名tokenservice, downloadURL := service.TokenService(filename) // 调用 Service 层获取签名 URLfmt.Println("uploadToken", downloadURL)// 返回签名 URL 和下载 URLdata := map[string]interface{}{"url":         tokenservice,"downloadURL": downloadURL,}c.JSON(http.StatusOK, data) // 发送 JSON 响应
}
Service Layer

TokenService 函数是服务层（Service Layer）中的核心组件，负责与阿里云的对象存储服务（OSS）进行交互，以生成用于上传和下载文件的签名 URL。以下是其具体职责和工作流程的详细解释：

  1. 加载环境变量：函数首先加载 .env 文件中的环境变量。这是一个安全的做法，用于存储敏感信息，如 OSS 的端点（EndPoint）、访问密钥（Access Key ID 和 Access Key Secret）以及 Bucket 名称。通过这种方式，可以避免将敏感信息硬编码在代码中。

  2. 初始化 OSS 客户端：使用从环境变量中获取的配置信息（如 EndPoint 和访问密钥），函数初始化 OSS 客户端。这个客户端用于执行后续的操作，如生成签名 URL。

  3. 获取 Bucket：通过 OSS 客户端获取指定的 Bucket。Bucket 是 OSS 中用于存储文件的基本单元。

  4. 生成签名 URL：函数为上传操作生成一个 PUT 方法的签名 URL，并为下载操作生成一个 GET 方法的签名 URL。这些签名 URL 是带有时间限制的，确保了操作的安全性。签名 URL 允许前端直接与 OSS 交互，无需通过服务器进行文件传输。

  5. 返回签名 URL：最后，函数返回这两个签名 URL（一个用于上传，另一个用于下载），供前端使用。

通过 TokenService 函数的设计和实现，服务层在保护敏感信息的同时，有效地与 OSS 进行交互，支持了高效且安全的文件上传和下载流程。这种设计减轻了服务器的负担，提高了整体的应用性能，并确保了数据传输过程的安全性。

package serviceimport ("log""os""github.com/aliyun/aliyun-oss-go-sdk/oss""github.com/joho/godotenv"
)// TokenService 生成用于 OSS 上传和下载的签名 URL
func TokenService(filename string) (string, string) {// 加载环境变量，用于获取 OSS 的配置err := godotenv.Load()if err != nil {log.Fatal("Error loading .env file:", err)}// 获取 OSS 配置信息OSS_END_POINT := os.Getenv("OSS_END_POINT")OSS_ACCESS_KEY_ID := os.Getenv("OSS_ACCESS_KEY_ID")OSS_ACCESS_KEY_SECRET := os.Getenv("OSS_ACCESS_KEY_SECRET")OSS_BUCKET := os.Getenv("OSS_BUCKET")// 初始化 OSS 客户端client, err := oss.New(OSS_END_POINT, OSS_ACCESS_KEY_ID, OSS_ACCESS_KEY_SECRET)if err != nil {log.Fatal("Error initializing OSS client:", err)}// 获取指定的 Bucketbucket, err := client.Bucket(OSS_BUCKET)if err != nil {log.Fatal("Error getting bucket:", err)}// 设置上传文件的内容类型options := []oss.Option{oss.ContentType("text/csv"),}// 构建文件在 OSS 上的存储路径key := "uploadfile/" + filename// 生成 PUT 方法的签名 URLsignedPutURL, err := bucket.SignURL(key, oss.HTTPPut, 600, options...)if err != nil {log.Fatal("Error generating signed PUT URL:", err)}// 生成 GET 方法的签名 URLsignedGetURL, err := bucket.SignURL(key, oss.HTTPGet, 600)if err != nil {log.Fatal("Error generating signed GET URL:", err)}return signedPutURL, signedGetURL
}

结论

使用 Go-Gin 框架结合 OSS 实现前端直传是一种高效且安全的方法。它适用于需要处理大量文件上传的应用，能够显著提升用户体验和系统性能。

参考资料

阿里云OSS文档：阿里云OSS文档

Go-gin Github官网：Go-gin Github官网

这篇关于使用Go-Gin框架实现 OSS 前端直传功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/556795。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2