我是一名扎根于湖南长沙的程序员,近期正面临一个极具挑战性的项目需求:需要运用百度开源组件WebUploader来实现大文件的高效传输,目标文件规模高达20G左右。此项目不仅要求实现文件的上传与下载功能,还需支持文件夹的上传和下载,且文件夹传输过程中必须完整保留其层级结构。

在浏览器兼容性方面,项目要求覆盖所有主流浏览器,包括但不限于IE8这一经典版本,以及信创国产浏览器如龙芯浏览器、红莲花浏览器和奇安信安全浏览器等,以确保在各种使用环境下都能稳定运行。

安全性是本项目不可忽视的一环,因此要求支持加密传输,具体采用SM4国密算法和AES算法,为数据传输提供坚实的安全保障。同时,项目还需适配信创国产化环境,操作系统需支持统信UOS、中标麒麟和银河麒麟等,以满足国产化替代的需求。

数据库方面,项目要求支持主流数据库产品如SQL Server、MySQL和Oracle,同时也需兼容国产化数据库产品,如达梦和人大金仓等,以提供灵活的数据存储方案。目前,后端我们采用.NET Core框架进行开发,前端则使用vue2-cli框架构建用户界面,数据库初步选定为SQL Server。

在存储方面,项目要求支持主流云服务提供商,包括阿里云、华为云、腾讯云、百度云、微软云和亚马逊云等,以提供灵活且可扩展的存储解决方案。

此外,项目还要求提供7*24小时的专业技术支持,并且免费提供产品源代码,以便后续的维护和升级。然而,我在网上搜索到的相关代码大多仅实现了上传功能,且文件夹上传功能存在诸多不足,无法满足项目需求。

因此,我迫切希望有行业大神能够伸出援手,免费指导我完成此项目,最好能帮我把代码写好并进行调试,以便我能够直接交付给客户使用。以下是我目前研究WebUploader时的一些前后端代码示例,供大神们参考:

前端代码(Vue组件部分)




import WebUploader from 'webuploader';

export default {
  mounted() {
    this.initUploader();
  },
  methods: {
    initUploader() {
      const uploader = WebUploader.create({
        swf: '/path/to/Uploader.swf', // Flash文件路径
        server: '/api/upload', // 上传接口
        pick: {
          id: '#filePicker',
          multiple: true,
          directory: true // 支持文件夹上传
        },
        formData: {
          // 可添加额外的表单数据
        },
        compress: false, // 不压缩图片
        chunked: true, // 分片上传
        chunkSize: 2 * 1024 * 1024, // 每片2MB
        threads: 3, // 上传并发数
        accept: {
          title: 'Files',
          extensions: '*',
          mimeTypes: '*'
        }
      });

      uploader.on('fileQueued', (file) => {
        const $list = $('#fileList');
        $list.append(`<div id="${file.id}" class="item">
          <h4 class="info">${file.name}</h4>
          <p class="state">等待上传...</p>
        </div>`);
      });

      uploader.on('uploadProgress', (file, percentage) => {
        const $li = $(`#${file.id}`),
          $percent = $li.find('.progress .progress-bar');
        if (!$percent.length) {
          $percent = $('<div class="progress progress-striped active">' +
            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
            '</div>' +
            '</div>').appendTo($li.find('.state')).find('.progress-bar');
        }
        $li.find('.state').text('上传中');
        $percent.css('width', percentage * 100 + '%');
      });

      uploader.on('uploadSuccess', (file) => {
        $(`#${file.id}`).find('.state').text('上传成功');
      });

      uploader.on('uploadError', (file) => {
        $(`#${file.id}`).find('.state').text('上传出错');
      });

      uploader.on('uploadComplete', (file) => {
        // 上传完成后的操作
      });
    }
  }
};



.uploader-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.uploader-list {
  margin-top: 20px;
}
.item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
}
.info {
  margin: 0;
  font-size: 14px;
}
.state {
  margin-top: 5px;
  font-size: 12px;
  color: #666;
}

后端代码(.NET Core部分,简化示例)

[ApiController]
[Route("api/[controller]")]
public class UploadController : ControllerBase
{
    [HttpPost]
    public async Task Upload()
    {
        var files = Request.Form.Files;
        var formData = Request.Form;

        foreach (var file in files)
        {
            if (file.Length > 0)
            {
                var filePath = Path.Combine("uploads", file.FileName);
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await file.CopyToAsync(stream);
                }
            }
        }

        // 处理分片上传逻辑(此处简化,实际需根据WebUploader的分片参数处理)
        // ...

        return Ok(new { message = "上传成功" });
    }
}

如果您对此项目感兴趣,或者有任何建议和指导,欢迎加入我们的QQ群(374992201)进行交流。期待您的宝贵意见和帮助,共同推动项目的成功实施!

设置框架

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

添加3rd引用

Alt

编译项目

Alt

NOSQL

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

SQL

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

使用IIS Express

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

创建数据库

Alt

配置数据库连接信息

Alt

检查数据库配置

Alt

访问页面进行测试

Alt
相关参考:
文件保存位置

效果预览

文件上传

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载
批量下载

下载续传

文件下载支持离线保存进度信息,刷新页面,关闭页面,重启系统均不会丢失进度信息。
下载续传

文件夹下载

支持下载文件夹,并保留层级结构,不打包,不占用服务器资源。
文件夹下载

下载完整示例

下载完整示例

更多推荐