快捷導(dǎo)航

asp.net core多文件分塊同時(shí)上傳組件使用詳解

更新時(shí)間：2023年12月11日 14:19:24 作者：IWing

這篇文章主要為大家介紹了一個(gè)可多個(gè)文件同時(shí)上傳、斷點(diǎn)續(xù)傳,并實(shí)時(shí)反饋上傳進(jìn)度的 Asp.Net core 組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

服務(wù)器端

引用 nuget 包：JMS.FileUploader.AspNetCore

然后啟用上傳組件：

            app.UseAuthorization();
            app.MapControllers();
             //啟用上傳組件，并限制單個(gè)文件最大100M
            app.UseJmsFileUploader(1024*102400);
            app.Run();

在 Controller 里面，寫個(gè) Test 函數(shù)，處理上傳的文件：

    [ApiController]
    [Route("[controller]/[action]")]
    public class MainController : ControllerBase
    {
        [HttpPost]
        public string Test([FromBody] object body)
        {
            var customHeader = Request.Headers["Custom-Header"];
            //臨時(shí)文件路徑
            var filepaths = Request.Headers["FilePath"];
            //文件名
            var filenames = Request.Headers["Name"];
            return filenames;
        }
    }

文件上傳完畢，保存在臨時(shí)文件中，Request.Headers["FilePath"] 可以讀取這些文件的路徑，如果確定要保留這些文件，用 File.Move 把它們移到你的目標(biāo)文件夾當(dāng)中;

Request.Headers["Name"] 則是讀取文件名。

前端

引入 jms-uploader 組件：

      import JmsUploader from "jms-uploader"

html 元素：

    <input id="file1" multiple type="file" />
    <input id="file2" multiple type="file" />
    <button onclick="upload()">
        upload
    </button>
    <div id="info"></div>

javascript 腳本：

    async function upload() {
        //自定義請(qǐng)求頭
        var headers = function () {
            return { "Custom-Header": "test" };
        };

        //提交的body
        var dataBody = {
            name: "abc"
        };

        var uploader = new JmsUploader("http://localhost:5200/main/test", [document.querySelector("#file1").files, document.querySelector("#file2").files], headers, dataBody);

        uploader.setPartSize(1024);//設(shè)置分塊大小，默認(rèn)是102400

        uploader.onUploading = function (percent, uploadedSize, totalSize) {
            document.querySelector("#info").innerHTML = percent + "% " + uploadedSize + "," + totalSize;
        };

        var ret = await uploader.upload();
        //上傳完畢
        alert(ret);
    }

組件源碼地址 https://github.com/simpleway2016/JMS.FileUploader

以上就是asp.net core多文件分塊同時(shí)上傳組件使用詳解的詳細(xì)內(nèi)容，更多關(guān)于asp.net core多文件分塊上傳的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: