jQuery Webuploader は大きなファイルを分割してアップロードします

通常、ファイルをアップロードする場合、アップロードするファイルはクライアント経由でサーバーにアップロードされます。動画などの大きなファイルをアップロードすると、サーバーのメモリが非常に圧迫されます。 、一般に、非同期アップロードには Flash または HTML5 を使用します。ファイルが比較的大きい場合、クライアントがファイルが 100% アップロードされたことを示していても、現在のページのサーバーへのリクエストは依然として長い待ち時間が発生します。もブロックされます。

通常の状況では、通常、長い転送が完了した後、サーバーに直接保存されます。

public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/plain";
   //保存文件
   context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName));
   context.Response.Write("Hello World");
  }

最近、Baidu のオープンソース アップロード コンポーネント webuploader がプロジェクトで使用されました。公式の紹介では、webuploader はマルチパート アップロードをサポートしています。

var uploader = WebUploader.create({
   auto: true,
   swf:'/webuploader/Uploader.swf',
   // 文件接收服务端。
   server: '/Uploader.ashx',
   // 内部根据当前运行是创建，可能是input元素，也可能是flash.
   pick: '#filePicker',
   chunked: true,//开启分片上传
   threads: 1,//上传并发数
   //由于Http的无状态特征，在往服务器发送数据过程传递一个进入当前页面是生成的GUID作为标示
   formData: {guid:"<%=Guid.NewGuid().ToString()%>"}
  });

webuploader のマルチパートアップロードは、ファイルをいくつかの部分に分割し、アップロードされたファイルがフラグメントのサイズより大きい場合、データをファイル受信側に投稿します。 2 つのフォーム要素 chunk と chunks をデータに追加します。前者はアップロードされたフラグメント内の現在のフラグメントの順序 (0 から始まる) を示し、後者はフラグメントの総数を表します。

ファイルを選択すると7つのシャードに分割されたため、Uploader.ashxにデータを投稿する処理が7回行われました。

各リクエスト内のフォーム要素のチャンクとチャンク、およびそれらが同じファイルのフラグメントであることを示す GUID

サーバーがデータを受信した後、データはこれらのパラメーターに従って処理できます。

1.GUIDを押して一時ファイルを作成します

2.受信したフラグメントデータをGUIDに対応するファイルに追加します。

3. アップロードされたファイル名に従って一時ファイルの名前を変更します

4. シャーディングがない場合は、直接保存します

public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/plain";
   //如果进行了分片
   if (context.Request.Form.AllKeys.Any(m => m == "chunk"))
   {
    //取得chunk和chunks
    int chunk =Convert.ToInt32(context.Request.Form["chunk"]);
    int chunks = Convert.ToInt32(context.Request.Form["chunks"]);
 
     
    //根据GUID创建用该GUID命名的临时文件
    string path = context.Server.MapPath("~/1/" + context.Request["guid"]);
    FileStream addFile = new FileStream(path, FileMode.Append, FileAccess.Write);
    BinaryWriter AddWriter = new BinaryWriter(addFile);
    //获得上传的分片数据流
    HttpPostedFile file = context.Request.Files[0];
    Stream stream = file.InputStream;
 
    BinaryReader TempReader = new BinaryReader(stream);
    //将上传的分片追加到临时文件末尾
    AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
    //关闭BinaryReader文件阅读器
    TempReader.Close();
    stream.Close();
    AddWriter.Close();
    addFile.Close();
 
    TempReader.Dispose();
    stream.Dispose();
    AddWriter.Dispose();
    addFile.Dispose();
    //如果是最后一个分片，则重命名临时文件为上传的文件名
    if (chunk == (chunks - 1))
    {
     FileInfo fileinfo = new FileInfo(path);
     fileinfo.MoveTo(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName));
    }
   }
   else//没有分片直接保存
   {
    context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName ));
   }
   context.Response.Write("ok");
  }

ニーズは一時的に満たされていますが、未解決の問題がまだいくつかあります:

1 . アップロード同時実行数が1を超えた場合 このとき、処理が完了していない分割アップロードサーバーが存在し、同時に2番目の分割が到着するため、ファイルが占有されているというエラーが発生します。
2. ロックによって最初の問題が解決される場合、ロックは間違いなく効率に影響します (同時に、ファイルを保存するコードにアクセスできるのは 1 つのプロセスのみです)。
3. ファイルの順序に問題があるため、2 番目のフラグメントが最初に到着し、その後にストリームを一時ファイルに追加することはできません。すべてのフラグメントが処理されるまで待ちます。アップロードが完了すると、1 つのファイルに結合されます。

これは単なるデモです。誰かが既存の問題の解決を手伝ってくれることを願っています。