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

Kyookk2023-12-31 12:07

引言

在现代 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 代码段展示了上传逻辑：

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 库生成 UUID
    const myUUID = uuid.v4(); 
    const secondname = myUUID + '.csv'; // 创建基于 UUID 的文件名
    const filename = file.name; // 获取原始文件名

    // 向后端发起请求，获取用于上传文件的签名后的 URL
    fetch(`/project/upload?filename=${secondname}`, { method: "GET" })
        .then((response) => response.json()) // 将响应解析为 JSON 格式
        .then((data) => {
            const url = data.url; // 从响应中提取签名后的 URL
            // 使用提取的 URL 和 PUT 方法直接上传文件到 OSS
            return 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 函数作为控制器层的组成部分，不仅确保了代码的模块化和清晰的职责划分，还优化了资源的使用和前后端的交互流程，使得文件上传操作更加直接、高效和安全。

Go 复制代码 
// UploadToken 处理前端的上传令牌请求
func UploadToken(c *gin.Context) {
    filename := c.Query("filename") // 从请求中获取文件名
    tokenservice, downloadURL := service.TokenService(filename) // 调用 Service 层获取签名 URL
    fmt.Println("uploadToken", downloadURL)

    // 返回签名 URL 和下载 URL
    data := 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 进行交互，支持了高效且安全的文件上传和下载流程。这种设计减轻了服务器的负担，提高了整体的应用性能，并确保了数据传输过程的安全性。

Go 复制代码 
package service

import (
	"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)
	}

	// 获取指定的 Bucket
	bucket, 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 方法的签名 URL
	signedPutURL, err := bucket.SignURL(key, oss.HTTPPut, 600, options...)
	if err != nil {
		log.Fatal("Error generating signed PUT URL:", err)
	}

	// 生成 GET 方法的签名 URL
	signedGetURL, 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官网

相关推荐
梵得儿SHI2 分钟前
Vue 开发环境搭建全指南：从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
召摇12 分钟前
在浏览器中无缝运行Go工具：WebAssembly实战指南
后端·面试·go
召摇15 分钟前
Spring Security入门指南
后端·spring·面试
笃行35015 分钟前
Ubuntu 22.04 服务器安装 KingbaseES 电科金仓数据库详细教程
后端
八月ouc16 分钟前
每日小知识点：10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉19 分钟前
从 Hexo 到 Astro：重构我的个人博客
前端·hexo
数据小馒头21 分钟前
浅谈SQL审核（一）：SQL审核实现方式与常见工具的选择
后端
街尾杂货店&26 分钟前
webpack - 单独打包指定JS文件（因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改）
前端·javascript·webpack
月光技术杂谈28 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
武子康1 小时前
大数据-128 - Flink 并行度详解：从概念到最佳实践，一文读懂任务并行执行机制 代码示例与性能优化
大数据·后端·flink
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答04UV安装并设置国内源05Linux下V2Ray安装配置指南06GitLab 零基础入门指南：从安装到项目管理全流程0746个Nano-banana 精选提示词，持续更新中08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）09windows找不到gpedit.msc（本地组策略编辑器）10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南