vue批量下載下傳檔案

需求：

支援檔案批量下載下傳。現在有很多小圖檔需要批量下載下傳，不希望在伺服器打包下載下傳。

支援大檔案斷點下載下傳。比如下載下傳10G的檔案。

PC端全平台支援。Windows,macOS,Linux

全浏覽器支援。ie6,ie7,ie8,ie9,ie10,ie11,edge,firefox,chrome,safari

支援檔案夾結構下載下傳。不希望在伺服器打包，而是直接下載下傳檔案夾，下載下傳後在本地檔案夾結構和伺服器保持一緻。

支援從URL中下載下傳檔案。

支援JSON資料結構。

方案：

1、首先讀取檔案夾下的檔案，可能同時存在多個檔案

2、選中檔案，然後點選下載下傳，同時可以選擇多個檔案。

思路：通過生産壓縮包的形式進行下載下傳，然後再清楚壓縮包，這樣使用者可以一次性全部下載下傳下來。

一、擷取目錄下的所有檔案，然後綁定到checkboxlist中 ，代碼如下：

批量下載下傳多個檔案

$("#btn-down-files").click(function () {

    if (downer.Config["Folder"] == "") { downer.open_folder(); return; }

    var urls = [

        { fileUrl: "http://res2.ncmem.com/res/images/ie11.png" }

        , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" }

        , { fileUrl: "http://res2.ncmem.com/res/images/firefox.png" }

        , { fileUrl: "http://res2.ncmem.com/res/images/edge.png" }

        , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" }

        , { fileUrl: "http://res2.ncmem.com/res/images/home/w.png" }

        , { fileUrl: "http://res2.ncmem.com/res/images/img.png" }

    ];

    downer.app.addUrls(urls);

});

自定義JSON資料下載下傳

$("#btn-down-json").click(function () {

    if (downer.Config["Folder"] == "") { downer.open_folder(); return; }

    var fd = {

        nameLoc: "圖檔清單"

        , files: [

            { fileUrl: "http://res2.ncmem.com/res/images/ie11.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/firefox.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/edge.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/home/w.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/img.png" }

        ]

    };

    downer.app.addJson(fd);

服務端代碼：

 protected void Btn_down_Click(object sender, EventArgs e)

    {

        if (ckl_ck.Items.Count > 0)

        {

            List<string> listFJ = new List<string>();//儲存附件路徑

            List<string> listFJName = new List<string>();//儲存附件名字

            for (int i = 0; i < ckl_ck.Items.Count; i++)

            {

                if (ckl_ck.Items[i].Selected)

                {

                    listFJ.Add(Server.MapPath("Resource/Help/") + ckl_ck.Items[i].Text);

                    listFJName.Add(ckl_ck.Items[i].Text);

                }

            }

            string time = DateTime.Now.Ticks.ToString();

            ZipFileMain(listFJ.ToArray(), listFJName.ToArray(), Server.MapPath("Resource/Help/" + time + ".zip"), 9);//壓縮檔案

            DownloadFile(Server.UrlEncode("附件.zip"), Server.MapPath("Resource/Help/" + time + ".zip"));//下載下傳檔案        }

    }

    private void DownloadFile(string fileName, string filePath)

        FileInfo fileInfo = new FileInfo(filePath);

        Response.Clear();

        Response.ClearContent();

        Response.ClearHeaders();

        Response.AddHeader("Content-Disposition", "attachment;filename=" + fileName);

        Response.AddHeader("Content-Length", fileInfo.Length.ToString());

        Response.AddHeader("Content-Transfer-Encoding", "binary");

        Response.ContentType = "application/octet-stream";

        Response.ContentEncoding = System.Text.Encoding.GetEncoding("gb2312");

        Response.WriteFile(fileInfo.FullName);

        Response.Flush();

        File.Delete(filePath);//删除已下載下傳檔案        Response.End();

    /// <summary>

    /// 壓縮檔案

    /// </summary>

    /// <param name="fileName">要壓縮的所有檔案（完全路徑)</param>

    /// <param name="fileName">檔案名稱</param>

    /// <param name="name">壓縮後檔案路徑</param>

    /// <param name="Level">壓縮級别</param>

    public void ZipFileMain(string[] filenames, string[] fileName, string name, int Level)

        ZipOutputStream s = new ZipOutputStream(File.Create(name));

        Crc32 crc = new Crc32();

        //壓縮級别

        s.SetLevel(Level); // 0 - store only to 9 - means best compression

        try

            int m = 0;

            foreach (string file in filenames)

                //打開壓縮檔案

                FileStream fs = File.OpenRead(file);//檔案位址

                byte[] buffer = new byte[fs.Length];

                fs.Read(buffer, 0, buffer.Length);

                //建立壓縮實體

                ZipEntry entry = new ZipEntry(fileName[m].ToString());//原檔案名

                //時間

                entry.DateTime = DateTime.Now;

                //空間大小

                entry.Size = fs.Length;

                fs.Close();

                crc.Reset();

                crc.Update(buffer);

                entry.Crc = crc.Value;

                s.PutNextEntry(entry);

                s.Write(buffer, 0, buffer.Length);

                m++;

        }

        catch

            throw;

        finally

            s.Finish();

            s.Close();

三、系統中需要引用的dll http://blog.ncmem.com/wordpress/2019/08/28/net檔案批量下載下傳/ 需要下載下傳。

四、運作效果如圖：