• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    Go+Gin实现安全多文件上传功能

    发布者: 琛瑞6678 | 发布时间: 2025-8-14 12:49| 查看数: 95| 评论数: 0|帖子模式

    Go+Gin实现安全多文件上传：带MD5校验的完整解决方案
    完整代码如下
    后端
    1. package main

    3. import (
    4.         "encoding/json"
    5.         "fmt"
    6.         "log"
    7.         "net/http"
    8.         "os"
    9.         "path/filepath"

    11.         "github.com/gin-contrib/cors"
    12.         "github.com/gin-gonic/gin"
    13. )

    15. // 前端传来的文件元数据
    16. type FileMetaRequest struct {
    17.         FileName     string `json:"fileName" binding:"required"`
    18.         FileSize     int64  `json:"fileSize" binding:"required"`
    19.         FileType     string `json:"fileType" binding:"required"`
    20.         FileMD5      string `json:"fileMD5" binding:"required"`
    21. }

    23. // 返回给前端的响应结构
    24. type UploadResponse struct {
    25.         OriginalName string `json:"originalName"`
    26.         SavedPath    string `json:"savedPath"`
    27.         ReceivedMD5  string `json:"receivedMD5"`
    28.         IsVerified   bool   `json:"isVerified"` // 是否通过验证
    29. }

    31. func main() {
    32.         r := gin.Default()

    34.         // 配置CORS
    35.         r.Use(cors.New(cors.Config{
    36.                 AllowOrigins: []string{"*"},
    37.                 AllowMethods: []string{"POST"},
    38.         }))

    40.         // 上传目录
    41.         uploadDir := "uploads"
    42.         if _, err := os.Stat(uploadDir); os.IsNotExist(err) {
    43.                 os.Mkdir(uploadDir, 0755)
    44.         }

    46.         r.POST("/upload", func(c *gin.Context) {
    47.                 // 1. 获取元数据JSON
    48.                 metaJson := c.PostForm("metadata")
    49.                 var fileMetas []FileMetaRequest
    50.                 if err := json.Unmarshal([]byte(metaJson), &fileMetas); err != nil {
    51.                         c.JSON(http.StatusBadRequest, gin.H{"error": "元数据解析失败"})
    52.                         return
    53.                 }

    55.                 // 2. 获取文件
    56.                 form, err := c.MultipartForm()
    57.                 if err != nil {
    58.                         c.JSON(http.StatusBadRequest, gin.H{"error": "文件获取失败"})
    59.                         return
    60.                 }
    61.                 files := form.File["files"]

    63.                 // 3. 验证文件数量匹配
    64.                 if len(files) != len(fileMetas) {
    65.                         c.JSON(http.StatusBadRequest, gin.H{
    66.                                 "error": fmt.Sprintf("元数据与文件数量不匹配(元数据:%d 文件:%d)",
    67.                                         len(fileMetas), len(files)),
    68.                         })
    69.                         return
    70.                 }

    72.                 var results []UploadResponse
    73.                 for i, file := range files {
    74.                         meta := fileMetas[i]

    76.                         // 4. 验证基本元数据
    77.                         if file.Filename != meta.FileName ||
    78.                                 file.Size != meta.FileSize {
    79.                                 results = append(results, UploadResponse{
    80.                                         OriginalName: file.Filename,
    81.                                         IsVerified:   false,
    82.                                 })
    83.                                 continue
    84.                         }

    86.                         // 5. 保存文件
    87.                         savedName := fmt.Sprintf("%s%s", meta.FileMD5, filepath.Ext(file.Filename))
    88.                         savePath := filepath.Join(uploadDir, savedName)

    90.                         if err := c.SaveUploadedFile(file, savePath); err != nil {
    91.                                 results = append(results, UploadResponse{
    92.                                         OriginalName: file.Filename,
    93.                                         IsVerified:   false,
    94.                                 })
    95.                                 continue
    96.                         }

    98.                         // 6. 记录结果（实际项目中这里应该做MD5校验）
    99.                         results = append(results, UploadResponse{
    100.                                 OriginalName: file.Filename,
    101.                                 SavedPath:    savePath,
    102.                                 ReceivedMD5:  meta.FileMD5,
    103.                                 IsVerified:   true,
    104.                         })
    105.                 }

    107.                 c.JSON(http.StatusOK, gin.H{
    108.                         "success": true,
    109.                         "results": results,
    110.                 })
    111.         })

    113.         log.Println("服务启动在 :8080")
    114.         r.Run(":8080")
    115. }
    复制代码
    前端
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>文件上传系统</title>
    7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>

    9.     <style>
    10.         body {
    11.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    12.             max-width: 800px;
    13.             margin: 0 auto;
    14.             padding: 20px;
    15.             background-color: #f5f5f5;
    16.         }
    17.         h1 {
    18.             color: #2c3e50;
    19.             text-align: center;
    20.             margin-bottom: 30px;
    21.         }
    22.         .upload-container {
    23.             background-color: white;
    24.             padding: 25px;
    25.             border-radius: 8px;
    26.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    27.         }
    28.         .file-drop-area {
    29.             border: 2px dashed #3498db;
    30.             border-radius: 5px;
    31.             padding: 30px;
    32.             text-align: center;
    33.             margin-bottom: 20px;
    34.             transition: all 0.3s;
    35.         }
    36.         .file-drop-area.highlight {
    37.             background-color: #f0f8ff;
    38.             border-color: #2980b9;
    39.         }
    40.         #fileInput {
    41.             display: none;
    42.         }
    43.         .file-label {
    44.             display: inline-block;
    45.             padding: 10px 20px;
    46.             background-color: #3498db;
    47.             color: white;
    48.             border-radius: 5px;
    49.             cursor: pointer;
    50.             transition: background-color 0.3s;
    51.         }
    52.         .file-label:hover {
    53.             background-color: #2980b9;
    54.         }
    55.         .file-list {
    56.             margin-top: 20px;
    57.         }
    58.         .file-item {
    59.             display: flex;
    60.             justify-content: space-between;
    61.             align-items: center;
    62.             padding: 10px;
    63.             border-bottom: 1px solid #eee;
    64.         }
    65.         .file-info {
    66.             flex: 1;
    67.         }
    68.         .file-name {
    69.             font-weight: bold;
    70.         }
    71.         .file-meta {
    72.             font-size: 0.8em;
    73.             color: #7f8c8d;
    74.         }
    75.         .file-type {
    76.             display: inline-block;
    77.             padding: 2px 8px;
    78.             border-radius: 4px;
    79.             font-size: 0.8em;
    80.             margin-left: 10px;
    81.         }
    82.         .type-body {
    83.             background-color: #2ecc71;
    84.             color: white;
    85.         }
    86.         .type-attachment {
    87.             background-color: #e74c3c;
    88.             color: white;
    89.         }
    90.         .progress-container {
    91.             margin-top: 20px;
    92.         }
    93.         .progress-bar {
    94.             height: 20px;
    95.             background-color: #ecf0f1;
    96.             border-radius: 4px;
    97.             margin-bottom: 10px;
    98.             overflow: hidden;
    99.         }
    100.         .progress {
    101.             height: 100%;
    102.             background-color: #3498db;
    103.             width: 0%;
    104.             transition: width 0.3s;
    105.         }
    106.         .results {
    107.             margin-top: 30px;
    108.         }
    109.         .result-item {
    110.             padding: 10px;
    111.             margin-bottom: 10px;
    112.             border-radius: 4px;
    113.             background-color: #f8f9fa;
    114.         }
    115.         .success {
    116.             border-left: 4px solid #2ecc71;
    117.         }
    118.         .error {
    119.             border-left: 4px solid #e74c3c;
    120.         }
    121.         button {
    122.             padding: 10px 20px;
    123.             background-color: #3498db;
    124.             color: white;
    125.             border: none;
    126.             border-radius: 4px;
    127.             cursor: pointer;
    128.             font-size: 16px;
    129.             transition: background-color 0.3s;
    130.         }
    131.         button:hover {
    132.             background-color: #2980b9;
    133.         }
    134.         button:disabled {
    135.             background-color: #95a5a6;
    136.             cursor: not-allowed;
    137.         }
    138.     </style>
    139. </head>
    140. <body>
    141. <h1>邮件文件上传系统</h1>

    143. <div class="upload-container">
    144.     <div class="file-drop-area" id="dropArea">
    145.         <input type="file" id="fileInput" multiple>
    146.         <label for="fileInput" class="file-label">选择文件或拖放到此处</label>
    147.         <p>支持多文件上传，自动计算MD5校验值</p>
    148.     </div>

    150.     <div class="file-list" id="fileList"></div>

    152.     <div class="progress-container" id="progressContainer" style="display: none;">
    153.         <h3>上传进度</h3>
    154.         <div class="progress-bar">
    155.             <div class="progress" id="progressBar"></div>
    156.         </div>
    157.         <div id="progressText">准备上传...</div>
    158.     </div>

    160.     <button id="uploadBtn" disabled>开始上传</button>
    161.     <button id="clearBtn">清空列表</button>
    162. </div>

    164. <div class="results" id="results"></div>

    166. <script>
    167.     // 全局变量
    168.     let files = [];
    169.     const dropArea = document.getElementById('dropArea');
    170.     const fileInput = document.getElementById('fileInput');
    171.     const fileList = document.getElementById('fileList');
    172.     const uploadBtn = document.getElementById('uploadBtn');
    173.     const clearBtn = document.getElementById('clearBtn');
    174.     const progressContainer = document.getElementById('progressContainer');
    175.     const progressBar = document.getElementById('progressBar');
    176.     const progressText = document.getElementById('progressText');
    177.     const resultsContainer = document.getElementById('results');

    179.     // 拖放功能
    180.     dropArea.addEventListener('dragover', (e) => {
    181.         e.preventDefault();
    182.         dropArea.classList.add('highlight');
    183.     });

    185.     dropArea.addEventListener('dragleave', () => {
    186.         dropArea.classList.remove('highlight');
    187.     });

    189.     dropArea.addEventListener('drop', (e) => {
    190.         e.preventDefault();
    191.         dropArea.classList.remove('highlight');
    192.         if (e.dataTransfer.files.length) {
    193.             fileInput.files = e.dataTransfer.files;
    194.             handleFiles();
    195.         }
    196.     });

    198.     // 文件选择处理
    199.     fileInput.addEventListener('change', handleFiles);

    201.     async function handleFiles() {
    202.         const newFiles = Array.from(fileInput.files);
    203.         if (newFiles.length === 0) return;

    205.         // 为每个文件计算MD5并创建元数据
    206.         for (const file of newFiles) {
    207.             const fileMeta = {
    208.                 file: file,
    209.                 name: file.name,
    210.                 size: file.size,
    211.                 type: file.type,
    212.                 md5: await calculateMD5(file),
    213.             };
    214.             files.push(fileMeta);
    215.         }

    217.         renderFileList();
    218.         uploadBtn.disabled = false;
    219.     }

    221.     // 计算MD5
    222.     async function calculateMD5(file) {
    223.         return new Promise((resolve) => {
    224.             const reader = new FileReader();
    225.             reader.onload = (e) => {
    226.                 const hash = md5(e.target.result);
    227.                 resolve(hash);
    228.             };
    229.             reader.readAsBinaryString(file); // 注意这里使用 readAsBinaryString
    230.         });
    231.     }

    233.     // 渲染文件列表
    234.     function renderFileList() {
    235.         fileList.innerHTML = '';

    237.         if (files.length === 0) {
    238.             fileList.innerHTML = '<p>没有选择文件</p>';
    239.             uploadBtn.disabled = true;
    240.             return;
    241.         }

    243.         files.forEach((fileMeta, index) => {
    244.             const fileItem = document.createElement('div');
    245.             fileItem.className = 'file-item';

    247.             fileItem.innerHTML = `
    248.                     <div class="file-info">
    249.                         <div class="file-name">${fileMeta.name}</div>
    250.                         <div class="file-meta">
    251.                             大小: ${formatFileSize(fileMeta.size)} |
    252.                             MD5: ${fileMeta.md5.substring(0, 8)}... |
    253.                             类型: ${fileMeta.type || '未知'}
    254.                         </div>
    255.                     </div>
    256.                     <div>
    257.                         <button onclick="toggleFileType(${index})" class="file-type ${fileMeta.isAttachment ? 'type-attachment' : 'type-body'}">
    258.                             ${fileMeta.isAttachment ? '附件' : '正文'}
    259.                         </button>
    260.                     </div>
    261.                 `;

    263.             fileList.appendChild(fileItem);
    264.         });
    265.     }

    267.     // 格式化文件大小
    268.     function formatFileSize(bytes) {
    269.         if (bytes === 0) return '0 Bytes';
    270.         const k = 1024;
    271.         const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    272.         const i = Math.floor(Math.log(bytes) / Math.log(k));
    273.         return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    274.     }

    276.     // 上传文件
    277.     uploadBtn.addEventListener('click', async () => {
    278.         if (files.length === 0) return;

    280.         uploadBtn.disabled = true;
    281.         progressContainer.style.display = 'block';
    282.         resultsContainer.innerHTML = '<h3>上传结果</h3>';

    284.         try {
    285.             const formData = new FormData();

    287.             // 添加元数据
    288.             const metadata = files.map(f => ({
    289.                 fileName: f.name,
    290.                 fileSize: f.size,
    291.                 fileType: f.type,
    292.                 fileMD5: f.md5,
    293.             }));
    294.             formData.append('metadata', JSON.stringify(metadata));

    296.             // 添加文件
    297.             files.forEach(f => formData.append('files', f.file));

    299.             // 使用Fetch API上传
    300.             const xhr = new XMLHttpRequest();
    301.             xhr.open('POST', 'http://localhost:8080/upload', true);

    303.             // 进度监听
    304.             xhr.upload.onprogress = (e) => {
    305.                 if (e.lengthComputable) {
    306.                     const percent = Math.round((e.loaded / e.total) * 100);
    307.                     progressBar.style.width = percent + '%';
    308.                     progressText.textContent = `上传中: ${percent}% (${formatFileSize(e.loaded)}/${formatFileSize(e.total)})`;
    309.                 }
    310.             };

    312.             xhr.onload = () => {
    313.                 if (xhr.status === 200) {
    314.                     const response = JSON.parse(xhr.responseText);
    315.                     showResults(response);
    316.                 } else {
    317.                     showError('上传失败: ' + xhr.statusText);
    318.                 }
    319.             };

    321.             xhr.onerror = () => {
    322.                 showError('网络错误，上传失败');
    323.             };

    325.             xhr.send(formData);

    327.         } catch (error) {
    328.             showError('上传出错: ' + error.message);
    329.         }
    330.     });

    332.     // 显示上传结果
    333.     function showResults(response) {
    334.         progressText.textContent = '上传完成！';

    336.         if (response.success) {
    337.             response.results.forEach(result => {
    338.                 const resultItem = document.createElement('div');
    339.                 resultItem.className = `result-item ${result.isVerified ? 'success' : 'error'}`;

    341.                 resultItem.innerHTML = `
    342.                         <div><strong>${result.originalName}</strong></div>
    343.                         <div>保存路径: ${result.savedPath || '无'}</div>
    344.                         <div>MD5校验: ${result.receivedMD5 || '无'} -
    345.                             <span style="color: ${result.isVerified ? '#2ecc71' : '#e74c3c'}">
    346.                                 ${result.isVerified ? '✓ 验证通过' : '× 验证失败'}
    347.                             </span>
    348.                         </div>
    349.                     `;

    351.                 resultsContainer.appendChild(resultItem);
    352.             });
    353.         } else {
    354.             showError(response.error || '上传失败');
    355.         }
    356.     }

    358.     // 显示错误
    359.     function showError(message) {
    360.         const errorItem = document.createElement('div');
    361.         errorItem.className = 'result-item error';
    362.         errorItem.textContent = message;
    363.         resultsContainer.appendChild(errorItem);
    364.     }

    366.     // 清空列表
    367.     clearBtn.addEventListener('click', () => {
    368.         files = [];
    369.         fileInput.value = '';
    370.         renderFileList();
    371.         progressContainer.style.display = 'none';
    372.         resultsContainer.innerHTML = '';
    373.         uploadBtn.disabled = true;
    374.     });
    375. </script>
    376. </body>
    377. </html>
    复制代码
    上传截图

    到此这篇关于Go+Gin实现安全多文件上传功能的文章就介绍到这了,更多相关Go Gin多文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

    来源：互联网
    免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    浏览过的版块

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表