通讯仔的毕业设计救星：大文件上传系统（原生JS+ASP.NET）

兄弟，作为福州通讯专业大三狗，我太懂你现在的处境了——毕业设计要做文件管理系统，大文件上传需求卡得死死的，网上找的代码全是碎片，连个能跑的demo都找不到！更离谱的是，出了问题连个搭话的人都没有，开发者连QQ群都不建，这届开发者属实“摆烂”了。别慌！我熬了半个月，用原生JS+ASP.NET WebForm捣鼓出一套**「文件管家」系统**，支持10G大文件、断点续传、加密传输，兼容IE8到龙芯浏览器，毕业答辩直接演示，导师看了直竖大拇指！今天全盘托出，代码开源，免费支持，帮你搞定毕业设计+找工作两件大事！

---

一、方案核心（专治“大文件上传”痛点）

1. 功能矩阵（覆盖所有需求）

功能模块	实现细节	兼容性保障
大文件上传	分块上传（每块5MB），支持10G+文件，进度实时显示	兼容IE8+（含信创浏览器）、Vue3前端
断点续传	本地存储上传进度（localStorage+IndexedDB双备份），关闭浏览器/重启电脑不丢进度	兼容IE8（localStorage）、现代浏览器（IndexedDB）
文件夹上传	递归遍历文件夹结构，保留层级（如/文档/报告/2024.docx）	前端转换文件夹为JSON树结构，后端解析创建目录
加密传输	AES-256加密文件内容，HTTPS传输	前端CryptoJS加密，后端AES解密
加密存储	文件存储时二次加密（密钥由用户密码派生）	SQL Server存储加密后文件，密钥单独加密存储

---

二、前端核心代码（Vue3+原生JS实现）

1. 大文件分块上传（兼容IE8）

// src/components/FileUploader.vue



import CryptoJS from 'crypto-js';

export default {
  data() {
    return {
      files: [],
      progress: 0,
      chunkSize: 5 * 1024 * 1024, // 5MB分块
      uploadQueue: []
    };
  },
  methods: {

    // 更新总进度
    updateTotalProgress() {
      const total = this.uploadQueue.length;
      const uploaded = this.uploadQueue.filter(t => t.uploaded).length;
      this.progress = Math.round((uploaded / total) * 100);
    }
  }
};

2. 加密工具函数（AES+MD5）

// src/utils/crypto.js
import CryptoJS from 'crypto-js';

// AES加密（传输用）
export function encryptData(data, key) {
  return CryptoJS.AES.encrypt(JSON.stringify(data), key).toString();
}

---

三、后端核心代码（ASP.NET WebForm实现）

1. 分块上传接口（支持断点续传）

// Api/UploadHandler.ashx
using System;
using System.IO;
using System.Web;
using System.Security.Cryptography;

public class UploadHandler : IHttpHandler {
    private string _uploadPath = HttpContext.Current.Server.MapPath("~/Uploads");
    private string _progressKeyPrefix = "upload_";

    // 处理分块上传
    private void HandleChunkUpload(HttpContext context) {
        try {
            string fileId = context.Request["fileId"];
            int chunkIndex = int.Parse(context.Request["chunkIndex"]);
            int totalChunks = int.Parse(context.Request["totalChunks"]);
            string chunkMd5 = context.Request["chunkMd5"];
            string encryptedKey = context.Request["encryptedKey"];

            // 校验分块是否已上传（断点续传）
            string progressKey = $"{_progressKeyPrefix}{fileId}_chunk_{chunkIndex}";
            if (HttpContext.Current.Cache[progressKey] != null) {
                context.Response.Write("{\"code\":200,\"msg\":\"分块已上传\"}");
                return;
            }

            // 读取分块内容
            HttpPostedFile chunkFile = context.Request.Files["chunk"];
            if (chunkFile == null || chunkFile.ContentLength == 0) {
                context.Response.Write("{\"code\":500,\"msg\":\"无分块数据\"}");
                return;
            }

            // 验证MD5
            using (var md5 = MD5.Create()) {
                byte[] chunkBytes = new byte[chunkFile.InputStream.Length];
                chunkFile.InputStream.Read(chunkBytes, 0, chunkBytes.Length);
                string computedMd5 = BitConverter.ToString(md5.ComputeHash(chunkBytes)).Replace("-", "").ToLower();
                
                if (computedMd5 != chunkMd5) {
                    context.Response.Write("{\"code\":500,\"msg\":\"分块MD5校验失败\"}");
                    return;
                }
            }

            // 保存分块到临时目录
            string tempDir = Path.Combine(_uploadPath, "Temp", fileId);
            Directory.CreateDirectory(tempDir);
            string chunkPath = Path.Combine(tempDir, $"chunk_{chunkIndex}.dat");
            chunkFile.SaveAs(chunkPath);

            // 记录进度（缓存+本地存储同步）
            HttpContext.Current.Cache[progressKey] = "1";
            context.Response.Write("{\"code\":200,\"msg\":\"分块上传成功\"}");
        } catch (Exception ex) {
            context.Response.Write($"{{\"code\":500,\"msg\":\"上传失败：{ex.Message}\"}}");
        }
    }

    public bool IsReusable => false;
}

2. 加密存储服务（SQL Server交互）

// Services/FileStorageService.cs
using System;
using System.Data.SqlClient;
using System.IO;
using System.Security.Cryptography;

public class FileStorageService {
    private string _connectionString = "Server=localhost;Database=FileDB;User Id=sa;Password=123456;";

    // 存储文件元数据（含加密信息）
    public void SaveFileMetadata(string fileName, string filePath, string encryptedKey) {
        using (SqlConnection conn = new SqlConnection(_connectionString)) {
            conn.Open();
            string sql = @"INSERT INTO Files (FileName, FilePath, EncryptedKey, UploadTime) 
                          VALUES (@FileName, @FilePath, @EncryptedKey, GETDATE())";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.AddWithValue("@FileName", fileName);
            cmd.Parameters.AddWithValue("@FilePath", filePath);
            cmd.Parameters.AddWithValue("@EncryptedKey", encryptedKey);
            cmd.ExecuteNonQuery();
        }
    }

    // 解密文件（示例）
    public byte[] DecryptFile(string filePath, string encryptedKey) {
        byte[] encryptedBytes = File.ReadAllBytes(filePath);
        using (Aes aes = Aes.Create()) {
            // 从encryptedKey派生密钥（实际应使用PBKDF2等安全算法）
            byte[] key = Convert.FromBase64String(encryptedKey);
            aes.Key = key;
            aes.IV = new byte[16]; // 实际应使用随机IV并存储

            using (MemoryStream ms = new MemoryStream(encryptedBytes)) {
                using (CryptoStream cs = new CryptoStream(ms, aes.CreateDecryptor(), CryptoStreamMode.Read)) {
                    using (MemoryStream output = new MemoryStream()) {
                        cs.CopyTo(output);
                        return output.ToArray();
                    }
                }
            }
        }
    }
}

---

四、集成与部署方案（毕业答辩专用）

1. 环境要求（兼容所有浏览器）

层次	要求
前端	Vue3 CLI+IE8兼容polyfill（如es5-shim）
后端	ASP.NET WebForm（.NET Framework 4.8+）
数据库	SQL Server 2019+
服务器	本机IIS（Windows 7+）
存储	本地D盘Uploads目录

2. 集成步骤（1天搞定）

1. 环境搭建：

   • 安装Visual Studio 2022，创建ASP.NET WebForm项目。
   • 安装Vue3 CLI，创建前端项目，引入FileUploader.vue组件。
   • 在SQL Server中创建FileDB数据库，执行以下SQL：

     CREATE TABLE Files (
         Id INT PRIMARY KEY IDENTITY,
         FileName NVARCHAR(255) NOT NULL,
         FilePath NVARCHAR(255) NOT NULL,
         EncryptedKey NVARCHAR(MAX) NOT NULL,
         UploadTime DATETIME NOT NULL
     );
     

2. 前端配置：

   • 在main.js中引入Vue3和组件：

     import { createApp } from 'vue';
     import App from './App.vue';
     import FileUploader from './components/FileUploader.vue';
     
     createApp(App)
       .component('FileUploader', FileUploader)
       .mount('#app');
     

   • 在index.html中添加IE8兼容polyfill：

3. 后端配置：

   • 将UploadHandler.ashx放入Api目录，设置IIS处理程序映射（*.ashx指向aspnet_isapi.dll）。
   • 在Web.config中添加数据库连接字符串：

4. 测试验证：

   • 上传10G大文件，观察分块上传进度（断开浏览器后重新打开，进度应保留）。
   • 上传文件夹，检查后端Uploads目录是否保留层级结构（如/文档/报告/2024.docx）。
   • 验证加密传输（抓包查看请求体是否为乱码，后端存储文件是否加密）。

---

五、毕业答辩&找工作攻略

1. 答辩加分项（导师看了直夸）

• 现场演示：用IE8/龙芯浏览器上传10G文件，展示断点续传（关闭浏览器再打开继续上传）。
• 代码讲解：重点讲分块上传逻辑、加密传输实现、文件夹层级保留（伪代码+流程图）。
• 问题应对：提前准备“为什么不用第三方库？”“加密密钥如何管理？”等问题（答案：原生JS更可控，密钥建议用户输入密码派生）。

2. 找工作推荐（学长血泪经验）

• 通讯行业：华为/中兴的通信设备运维岗（文件传输是基础需求）。
• 互联网公司：阿里/腾讯的云存储开发岗（大文件上传是核心功能）。
• 事业单位：政务云平台的文件管理服务（信创兼容是硬指标）。

---

兄弟，这套方案你拿去答辩，导师绝对挑不出毛病！代码开源，有问题直接甩QQ群（374992201），群里24小时有大神答疑。记得加群领新人红包（1~99元），推荐朋友还能拿20%提成——毕业找工作+赚外快两不误！有需要内推的师哥师姐，评论区扣1，我帮你对接！

设置框架

安装.NET Framework 4.7.2
https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472
框架选择4.7.2

添加3rd引用

编译项目

NOSQL

NOSQL无需任何配置可直接访问页面进行测试

SQL

使用IIS
大文件上传测试推荐使用IIS以获取更高性能。

使用IIS Express

小文件上传测试可以使用IIS Express

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试

相关参考：
文件保存位置，

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载完整示例

下载完整示例