基於 js 管理大文件上傳以及斷點續傳

前言

前端小夥伴們平常在開發過程中文件上傳是經常遇到的一個問題，也許你能夠實現相關的功能，但是做完後回想代碼實現上是不是有點 "力不從心" 呢？你真的瞭解文件上傳嗎？如何做到大文件上傳以及斷電續傳呢，前後端通訊常用的格式，文件上傳進度管控，服務端是如何實現的？接下來讓我們開啓手摸手系列的學習吧！！！如有不足之處，望不吝指教，接下來按照下圖進行學習探討

一切就緒，開始吧！！！

前端結構

依賴. png

後端結構 (node + express)

文件上傳一般是基於兩種方式，FormData以及Base64

基於 FormData 實現文件上傳

 //前端代碼
    // 主要展示基於ForData實現上傳的核心代碼
    upload_button_upload.addEventListener('click', function () {
            if (upload_button_upload.classList.contains('disable') || upload_button_upload.classList.contains('loading')) return;
            if (!_file) {
                alert('請您先選擇要上傳的文件~~');
                return;
            }
            changeDisable(true);
            // 把文件傳遞給服務器：FormData
            let formData = new FormData();
            // 根據後臺需要提供的字段進行添加
            formData.append('file', _file);
            formData.append('filename', _file.name);
            instance.post('/upload_single', formData).then(data => {
                if (+data.code === 0) {
                    alert(`文件已經上傳成功~~,您可以基於 ${data.servicePath} 訪問這個資源~~`);
                    return;
                }
                return Promise.reject(data.codeText);
            }).catch(reason => {
                alert('文件上傳失敗，請您稍後再試~~');
            }).finally(() => {
                clearHandle();
                changeDisable(false);
            });
        });
複製代碼

基於 BASE64 實現文件上傳

BASE64 具體方法

上面這個例子中後端收到前端傳過來的文件會對它進行生成一個隨機的名字，存下來，但是有些公司會將這一步放在前端進行，生成名字後一起發給後端，接下來我們來實現這個功能

前端生成文件名傳給後端

這裏就需要用到上面提到的插件 SparkMD5[1], 具體怎麼用就不做贅述了，請參考文檔

上傳進度管控

這個功能相對來說比較簡單，文中用到的請求庫是 axios, 進度管控主要基於 axios 提供的 onUploadProgress 函數進行實現，這裏一起看下這個函數的實現原理

大文件上傳

大文件上傳一般採用切片上傳的方式，這樣可以提高文件上傳的速度，前端拿到文件流後進行切片，然後與後端進行通訊傳輸，一般還會結合斷點繼傳，這時後端一般提供三個接口，第一個接口獲取已經上傳的切片信息，第二個接口將前端切片文件進行傳輸，第三個接口是將所有切片上傳完成後告訴後端進行文件合併

服務端代碼 (大文件上傳 + 斷點續傳)

 // 大文件切片上傳 & 合併切片
    const merge = function merge(HASH, count) {
        return new Promise(async (resolve, reject) => {
            let path = `${uploadDir}/${HASH}`,
                fileList = [],
                suffix,
                isExists;
            isExists = await exists(path);
            if (!isExists) {
                reject('HASH path is not found!');
                return;
            }
            fileList = fs.readdirSync(path);
            if (fileList.length < count) {
                reject('the slice has not been uploaded!');
                return;
            }
            fileList.sort((a, b) => {
                let reg = /_(\d+)/;
                return reg.exec(a)[1] - reg.exec(b)[1];
            }).forEach(item => {
                !suffix ? suffix = /\.([0-9a-zA-Z]+)$/.exec(item)[1] : null;
                fs.appendFileSync(`${uploadDir}/${HASH}.${suffix}`, fs.readFileSync(`${path}/${item}`));
                fs.unlinkSync(`${path}/${item}`);
            });
            fs.rmdirSync(path);
            resolve({
                path: `${uploadDir}/${HASH}.${suffix}`,
                filename: `${HASH}.${suffix}`
            });
        });
    };
    app.post('/upload_chunk', async (req, res) => {
        try {
            let {
                fields,
                files
            } = await multiparty_upload(req);
            let file = (files.file && files.file[0]) || {},
                filename = (fields.filename && fields.filename[0]) || "",
                path = '',
                isExists = false;
            // 創建存放切片的臨時目錄
            let [, HASH] = /^([^_]+)_(\d+)/.exec(filename);
            path = `${uploadDir}/${HASH}`;
            !fs.existsSync(path) ? fs.mkdirSync(path) : null;
            // 把切片存儲到臨時目錄中
            path = `${uploadDir}/${HASH}/${filename}`;
            isExists = await exists(path);
            if (isExists) {
                res.send({
                    code: 0,
                    codeText: 'file is exists',
                    originalFilename: filename,
                    servicePath: path.replace(__dirname, HOSTNAME)
                });
                return;
            }
            writeFile(res, path, file, filename, true);
        } catch (err) {
            res.send({
                code: 1,
                codeText: err
            });
        }
    });
    app.post('/upload_merge', async (req, res) => {
        let {
            HASH,
            count
        } = req.body;
        try {
            let {
                filename,
                path
            } = await merge(HASH, count);
            res.send({
                code: 0,
                codeText: 'merge success',
                originalFilename: filename,
                servicePath: path.replace(__dirname, HOSTNAME)
            });
        } catch (err) {
            res.send({
                code: 1,
                codeText: err
            });
        }
    });
    app.get('/upload_already', async (req, res) => {
        let {
            HASH
        } = req.query;
        let path = `${uploadDir}/${HASH}`,
            fileList = [];
        try {
            fileList = fs.readdirSync(path);
            fileList = fileList.sort((a, b) => {
                let reg = /_(\d+)/;
                return reg.exec(a)[1] - reg.exec(b)[1];
            });
            res.send({
                code: 0,
                codeText: '',
                fileList: fileList
            });
        } catch (err) {
            res.send({
                code: 0,
                codeText: '',
                fileList: fileList
            });
        }
    });
複製代碼

總結

綜上是我對文件上傳的總結，能力有限，如有錯誤，望不吝指教，最後送上一句話：

夫學須靜也，才須學也，非學無以廣才，非志無以成學。淫慢則不能勵精，險躁則不能治性。年與時馳，意與日去，遂成枯落

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/hOkxwjSHGZ-3oXyN3CwwqQ

猜你喜歡