大文件分片上传，后端拼接保存（前端：antd；后端：.Net 5 WebAPI）

前言

对于普通业务场景而言，直接用 FormData() 将文件以入参的一个参数传给后端即可，但此方法有一个弊端就是，有个 30M 的上限。

对于动辄几百 M、几个 G 的文件上传需求，FormData() 显然已经黯然了，但仍想以此方法上传，那么就可以把大文件，按照同一大小进行分片，然后分片上传至后端，上传完后在通知后端进行组装保存即可。

效果先贴出：

　　

　　

 废话不多说，代码见！

前端部分

　　js 业务处理代码：（一些细节就不全部贴了，需要自己调试修改喽）

  state = {
    fileList: [],
    filenameview: "等待上传...",
    zhuti: "",
    wenjianfjdz: "",//附件共享盘地址
    fileuploading: false,
    disablebtndelete: "none",
    chunkList: [],//文件切片 List
  };
  //创建文件切片//默认大小为 20M 一个片段
  createFileChunk = (file, size = 20 * 1024 * 1024) => {
    const fileChunkList = [];
    let cur = 0;
    while (cur < file.size) {
      fileChunkList.push({ file: file.slice(cur, cur + size), name: file.uid });//uid:文件唯一标识
      cur += size;
    }
    return fileChunkList;
  };
  //上传文件附件(大文件)
  uploadloadFileAttachment = ({ file, fileList }) => {
    this.setState({ fileuploading: true, tipContent: "正在校验文件，请稍后..." });
    if (this.state.zhuti == null || this.state.zhuti.length == 0) {
      message.warning("上传文件前，请先填写‘主题’！");this.setState({ fileuploading: false }); return;

    }
    else {
      if (file.status === "done") {
        this.setState({ tipContent: "文件已完成校验，上传中，请耐心等待..." });
        let file = fileList[fileList.length - 1].originFileObj;
        if (file.size / (1024 * 1024) > 3096) {//设置最大不超过 3G
          message.warning("附件大小不允许超过 3GB ！");
          this.setState({ fileuploading: false, tipContent: "加载中..." });
          return;
        }
        let filename = file.name;
        let chunklistcurr = this.createFileChunk(file).map(({ file, name }, index) => {
          return {
            chunk: file,
            size: file.size,
            percent: 0,
            name: name,
            index,
          };
        });
        let filecount = chunklistcurr.length;
        let ii = 0;
        chunklistcurr.forEach(element => {//分片传输
          const formData = new FormData()
          formData.append('file', element.chunk);
          formData.append('index', element.index);//片段顺序
          formData.append('name', element.name);//文件唯一标识
          formData.append('size', element.size);
          formData.append('filecount', filecount);//片段总数
          axios({
            method: 'post',
            url: '/api/system/System/UploadFileAttachmentChunk?zhuti=' + this.state.zhuti,
            data: formData,
            headers: { "Content-Type": "multipart/form-data" }
          }).then(({ data }) => {
            if (data.code == 200) {
              ii++;//记录已经上传成功的片段数量
              if (ii == filecount) {//分块全部上传完成
                let indata = { "name": chunklistcurr[0].name, "filecount": filecount, "filename": filename, "zhuti": this.state.zhuti }
                axios({//传输完成，通知拼接
                  method: 'post',
                  url: '/api/system/System/CombineChunkToFile',
                  data: indata,
                  headers: { "Content-Type": "application/json" }
                }).then(({ data }) => {
                  if (data.code == 200) {
                    this.setState({ wenjianfjdz: data.desc.split("|")[0], filenameview: data.desc.split("|")[1], disablebtndelete: "" });//记录返回值
                    message.success(`上传成功！`);
                  }
                  else if (result.code == 202) {
                    window.location.href = "/wellcome";
                  }
                  else {
                    message.error("上传失败，请稍后重试！详情：" + data.desc);
                  }
                }).catch((err) => {
                  console.log(err);
                  message.error("上传失败，请稍后重试！");
                }).finally(() => {
                  this.setState({ fileuploading: false, tipContent: "加载中..." });
                })
              }
            }
            else if (result.code == 202) {
              window.location.href = "/wellcome";
            }
            else {
              message.error("上传失败，请稍后重试！详情：" + data.desc);
              return;
            }
          }).catch((err) => {
            console.log(err);
            message.error("上传失败，请稍后重试！");
            return;
          }).finally(() => {
          })
        })
      }
      else if (file.status === "error") {
        message.error(`上传失败，请稍后重试！${file.name}`);
        this.setState({ fileuploading: false, tipContent: "" });
      }
    }
    this.setState({ fileList: [...fileList] });
  }
  beforeUploadMethod = () => this.setState({ fileuploading: true, tipContent: "正在校验文件，请稍后..." })

　　html 处理代码：（一些细节就不全部贴了，需要自己调试修改喽）

  <Upload
    fileList={fileList}
    showUploadList={false}
    onChange={this.uploadloadFileAttachment}
    style={{ float: "left", lineHeight: "55px" }}
  >
    <Button icon={<UploadOutlined />} style={{ margin: "20px 20px 20px 0", display: permissionedit }}>上传附件</Button>
  </Upload>
  <Button icon={<DeleteOutlined />} danger style={{ margin: "20px 20px 20px 0", display: disablebtndelete }} onClick={this.btnDeleteFileClick}>删除附件</Button>
  <label style={{ float: "left", lineHeight: "0px", color: '#bfbfbf', fontSize: 10 }}>支持扩展名：apk/exe/pdf/xls/doc/ppt等</label>
  <label style={{ float: "left", lineHeight: "55px" }}>{filenameview}</label>

后端部分

        private static List<FileChunkModel> fileChunkList = new List<FileChunkModel>();
        /// <summary>
        /// 接收文件片段
        /// </summary>
        /// <param name="file"></param>
        /// <returns></returns>
        [HttpPost]
        public BackDataModel UploadFileAttachmentChunk(IFormCollection file)
        {
            try
            {
                var fileexist = fileChunkList.Where(ff => ff.name == file["name"] && ff.index == file["index"]).ToList();
                if (fileexist.Count == 0)
                {
                    using (var stream = file.Files[0].OpenReadStream())
                    {
                        using (BinaryReader reader = new BinaryReader(stream))
                        {
                            fileChunkList.Add(new FileChunkModel
                            {
                                name = file["name"],
                                index = Convert.ToInt32(file["index"]),
                                size = file["size"],
                                formfile = reader.ReadBytes((int)stream.Length)
                            });
                        }
                    }
                }
                return new BackDataModel { Code = 200, Desc = "" };
            }
            catch (Exception ex)
            {
                return new BackDataModel { Code = 201, Desc = "" };
            }
        }

        /// <summary>
        /// 文件片段组装
        /// </summary>
        /// <param name="filemodel"></param>
        /// <returns></returns>
        [HttpPost]
        public BackDataModel CombineChunkToFile([FromBody] FileChunkModel filemodel)
        {
            try
            {if (!connectState())
                    return new BackDataModel() { Code = 201, Desc = $"上传失败，共享文件夹无法访问，请联系管理员确认！" };
                List<FileChunkModel> fileChunkModels = fileChunkList.Where(ff => ff.name == filemodel.name).ToList();
                if (fileChunkModels.Count == Convert.ToInt32(filemodel.filecount))
                {
                    if (!Directory.Exists($@"\\存储\{filemodel.zhuti}"))
                    {
                        Directory.CreateDirectory($@"\\存储\{filemodel.zhuti}");
                    }
                    string path = $@"\\存储\{filemodel.zhuti}\{filemodel.filename}";
                    path = PublicMethod.GetFilePath(path, filemodel);

                    using (FileStream CombineStream = new FileStream(path, FileMode.OpenOrCreate))
                    {
                        using (BinaryWriter CombineWriter = new BinaryWriter(CombineStream))
                        {
　　　　　　　　　　　　　　　　 fileChunkModels = fileChunkModels.OrderBy(ff => ff.index).ToList(); //合并前必须给文件片段按照顺序排列，否则部分文件会被破坏（例如：.apk）
                            foreach (var filecurr in fileChunkModels)
                            {
                                var filechunk = filecurr.formfile;
                                CombineWriter.Write(filechunk);
                                fileChunkList.Remove(filecurr);
                            }
                            lock (fileChunkList)
                            {
                                if (fileChunkList.Count == 0)
                                {
                                    fileChunkList = null;
                                    fileChunkList=new List<FileChunkModel>();
                                }
                            }
                            return new BackDataModel() { Code = 200, Desc = $"{path}|{path.Split('\\')[path.Split('\\').Length-1]}" };
                        }
                    }
                }
                else
                    return new BackDataModel() { Code = 201, Desc = "上传失败" };
            }
            catch (Exception ex)
            {
                return new BackDataModel() { Code = 201, Desc = "上传失败" };
            }
        }    
        /// <summary>
        /// 连接远程共享文件夹
        /// </summary>
        /// <param name="path">远程共享文件夹的路径</param>
        /// <param name="userName">用户名</param>
        /// <param name="passWord">密码</param>
        /// <returns></returns>
        private static bool connectState()
        {
            bool Flag = false;
            Process proc = new Process();
            try
            {
                proc.StartInfo.FileName = "cmd.exe";
                proc.StartInfo.UseShellExecute = false;
                proc.StartInfo.RedirectStandardInput = true;
                proc.StartInfo.RedirectStandardOutput = true;
                proc.StartInfo.RedirectStandardError = true;
                proc.StartInfo.CreateNoWindow = true;
                proc.Start();
                string dosLine = @"net use \\存储 password /user:username";
                proc.StandardInput.WriteLine(dosLine);
                proc.StandardInput.WriteLine("exit");
                while (!proc.HasExited)
                {
                    proc.WaitForExit(1000);
                }
                string errormsg = proc.StandardError.ReadToEnd();
                proc.StandardError.Close();
                if (string.IsNullOrEmpty(errormsg))
                {
                    Flag = true;
                }
                else
                {
                    throw new Exception(errormsg);
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                proc.Close();
                proc.Dispose();
            }
            return Flag;
        }

部署至 IIS 上传大文件异常问题

问题描述：

　　在前后端都配置好支持大文件上传后，本地测试没问题，但部署至 IIS 后，上传 30M 以上的文件一直提示失败。

解决方法：

　　问题原因： IIS 默认限制了交互最大内容长度（字节）。默认值为：30 000 000（约 2.93M）。

　　所以解决问题的关键就是突破这种限制了。

　　其中一种修改步骤如下图：（改成最大3G：3,221,225,472）

 

 

 注：个人整理，已验证可用，有疑问欢迎指正。