如何基于js管理大文件上傳及斷點續(xù)傳詳析

更新時間：2021年08月30日 11:34:20 作者：麥忙

文件上傳是 Web 開發(fā)肯定會碰到的問題,而文件夾上傳則更加難,下面這篇文章主要給大家介紹了關(guān)于如何基于js管理大文件上傳及斷點續(xù)傳的相關(guān)資料,需要的朋友可以參考下

前言

前端小伙伴們平常在開發(fā)過程中文件上傳是經(jīng)常遇到的一個問題，也許你能夠?qū)崿F(xiàn)相關(guān)的功能，但是做完后回想代碼實現(xiàn)上是不是有點"力不從心"呢？你真的了解文件上傳嗎？如何做到大文件上傳以及斷電續(xù)傳呢，前后端通訊常用的格式，文件上傳進(jìn)度管控，服務(wù)端是如何實現(xiàn)的？接下來讓我們開啟手摸手系列的學(xué)習(xí)吧?。?！如有不足之處，望不吝指教，接下來按照下圖進(jìn)行學(xué)習(xí)探討

一切就緒，開始吧?。?！

前端結(jié)構(gòu)

頁面展示

項目依賴

后端結(jié)構(gòu)(node + express)

目錄結(jié)構(gòu)

Axios的簡單封裝

let instance = axios.create();
instance.defaults.baseURL = 'http://127.0.0.1:8888';
instance.defaults.headers['Content-Type'] = 'multipart/form-data';
instance.defaults.transformRequest = (data, headers) => {
    const contentType = headers['Content-Type'];
    if (contentType === "application/x-www-form-urlencoded") return Qs.stringify(data);
    return data;
};
instance.interceptors.response.use(response => {
    return response.data;
});

文件上傳一般是基于兩種方式，F(xiàn)ormData以及Base64

基于FormData實現(xiàn)文件上傳

 //前端代碼
    // 主要展示基于ForData實現(xiàn)上傳的核心代碼
    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);
            // 把文件傳遞給服務(wù)器：FormData
            let formData = new FormData();
            // 根據(jù)后臺需要提供的字段進(jìn)行添加
            formData.append('file', _file);
            formData.append('filename', _file.name);
            instance.post('/upload_single', formData).then(data => {
                if (+data.code === 0) {
                    alert(`文件已經(jīng)上傳成功~~,您可以基于 ${data.servicePath} 訪問這個資源~~`);
                    return;
                }
                return Promise.reject(data.codeText);
            }).catch(reason => {
                alert('文件上傳失敗，請您稍后再試~~');
            }).finally(() => {
                clearHandle();
                changeDisable(false);
            });
        });

基于BASE64實現(xiàn)文件上傳

BASE64具體方法

export changeBASE64(file) => {
   return new Promise(resolve => {
    let fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = ev => {
        resolve(ev.target.result);
    };
  });
};

具體實現(xiàn)

upload_inp.addEventListener('change', async function () {
        let file = upload_inp.files[0],
            BASE64,
            data;
        if (!file) return;
        if (file.size > 2 * 1024 * 1024) {
            alert('上傳的文件不能超過2MB~~');
            return;
        }
        upload_button_select.classList.add('loading');
        // 獲取Base64
        BASE64 = await changeBASE64(file);
        try {
            data = await instance.post('/upload_single_base64', {
            // encodeURIComponent(BASE64) 防止傳輸過程中特殊字符亂碼，同時后端需要用decodeURIComponent進(jìn)行解碼
                file: encodeURIComponent(BASE64),
                filename: file.name
            }, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            });
            if (+data.code === 0) {
                alert(`恭喜您，文件上傳成功，您可以基于 ${data.servicePath} 地址去訪問~~`);
                return;
            }
            throw data.codeText;
        } catch (err) {
            alert('很遺憾，文件上傳失敗，請您稍后再試~~');
        } finally {
            upload_button_select.classList.remove('loading');
        }
    **});**

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

前端生成文件名傳給后端

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

封裝讀取文件流的方法

const changeBuffer = file => {
    return new Promise(resolve => {
        let fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);
        fileReader.onload = ev => {
            let buffer = ev.target.result,
                spark = new SparkMD5.ArrayBuffer(),
                HASH,
                suffix;
            spark.append(buffer);
            // 得到文件名
            HASH = spark.end();
            // 獲取后綴名
            suffix = /\.([a-zA-Z0-9]+)$/.exec(file.name)[1];
            resolve({
                buffer,
                HASH,
                suffix,
                filename: `${HASH}.${suffix}`
            });
        };
    });
  };

上傳服務(wù)器相關(guān)代碼

upload_button_upload.addEventListener('click', async function () {
        if (checkIsDisable(this)) return;
        if (!_file) {
            alert('請您先選擇要上傳的文件~~');
            return;
        }
        changeDisable(true);
        // 生成文件的HASH名字
        let {
            filename
        } = await changeBuffer(_file);
        let formData = new FormData();
        formData.append('file', _file);
        formData.append('filename', filename);
        instance.post('/upload_single_name', formData).then(data => {
            if (+data.code === 0) {
                alert(`文件已經(jīng)上傳成功~~,您可以基于 ${data.servicePath} 訪問這個資源~~`);
                return;
            }
            return Promise.reject(data.codeText);
        }).catch(reason => {
            alert('文件上傳失敗，請您稍后再試~~');
        }).finally(() => {
            changeDisable(false);
            upload_abbre.style.display = 'none';
            upload_abbre_img.src = '';
            _file = null;
        });
    });

上傳進(jìn)度管控

這個功能相對來說比較簡單，文中用到的請求庫是axios,進(jìn)度管控主要基于axios提供的onUploadProgress函數(shù)進(jìn)行實現(xiàn)，這里一起看下這個函數(shù)的實現(xiàn)原理

監(jiān)聽xhr.upload.onprogress

文件上傳后得到的對象

具體實現(xiàn)

(function () {
    let upload = document.querySelector('#upload4'),
        upload_inp = upload.querySelector('.upload_inp'),
        upload_button_select = upload.querySelector('.upload_button.select'),
        upload_progress = upload.querySelector('.upload_progress'),
        upload_progress_value = upload_progress.querySelector('.value');

    // 驗證是否處于可操作性狀態(tài)
    const checkIsDisable = element => {
        let classList = element.classList;
        return classList.contains('disable') || classList.contains('loading');
    };

    upload_inp.addEventListener('change', async function () {
        let file = upload_inp.files[0],
            data;
        if (!file) return;
        upload_button_select.classList.add('loading');
        try {
            let formData = new FormData();
            formData.append('file', file);
            formData.append('filename', file.name);
            data = await instance.post('/upload_single', formData, {
                // 文件上傳中的回調(diào)函數(shù) xhr.upload.onprogress
                onUploadProgress(ev) {
                    let {
                        loaded,
                        total
                    } = ev;
                    upload_progress.style.display = 'block';
                    upload_progress_value.style.width = `${loaded/total*100}%`;
                }
            });
            if (+data.code === 0) {
                upload_progress_value.style.width = `100%`;
                alert(`恭喜您，文件上傳成功，您可以基于 ${data.servicePath} 訪問該文件~~`);
                return;
            }
            throw data.codeText;
        } catch (err) {
            alert('很遺憾，文件上傳失敗，請您稍后再試~~');
        } finally {
            upload_button_select.classList.remove('loading');
            upload_progress.style.display = 'none';
            upload_progress_value.style.width = `0%`;
        }
    });

    upload_button_select.addEventListener('click', function () {
        if (checkIsDisable(this)) return;
        upload_inp.click();
    });
})();

大文件上傳

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

進(jìn)行切片，切片的方式分為固定數(shù)量以及固定大小，我們這里兩者結(jié)合一下

// 實現(xiàn)文件切片處理 「固定數(shù)量 & 固定大小」
let max = 1024 * 100,
    count = Math.ceil(file.size / max),
    index = 0,
    chunks = [];
if (count > 100) {
    max = file.size / 100;
    count = 100;
}
while (index < count) {
    chunks.push({
    // file文件本身就具有slice方法，見下圖
        file: file.slice(index * max, (index + 1) * max),
        filename: `${HASH}_${index+1}.${suffix}`
    });
    index++;
}

發(fā)送至服務(wù)端

chunks.forEach(chunk => {
    let fm = new FormData;
    fm.append('file', chunk.file);
    fm.append('filename', chunk.filename);
    instance.post('/upload_chunk', fm).then(data => {
        if (+data.code === 0) {
            complate();
            return;
        }
        return Promise.reject(data.codeText);
    }).catch(() => {
        alert('當(dāng)前切片上傳失敗，請您稍后再試~~');
        clear();
    });
   });

文件上傳 + 斷電續(xù)傳 + 進(jìn)度管控

    upload_inp.addEventListener('change', async function () {
        let file = upload_inp.files[0];
        if (!file) return;
        upload_button_select.classList.add('loading');
        upload_progress.style.display = 'block';

        // 獲取文件的HASH
        let already = [],
            data = null,
            {
                HASH,
                suffix
            } = await changeBuffer(file);

        // 獲取已經(jīng)上傳的切片信息
        try {
            data = await instance.get('/upload_already', {
                params: {
                    HASH
                }
            });
            if (+data.code === 0) {
                already = data.fileList;
            }
        } catch (err) {}

        // 實現(xiàn)文件切片處理 「固定數(shù)量 & 固定大小」
        let max = 1024 * 100,
            count = Math.ceil(file.size / max),
            index = 0,
            chunks = [];
        if (count > 100) {
            max = file.size / 100;
            count = 100;
        }
        while (index < count) {
            chunks.push({
                file: file.slice(index * max, (index + 1) * max),
                filename: `${HASH}_${index+1}.${suffix}`
            });
            index++;
        }

        // 上傳成功的處理
        index = 0;
        const clear = () => {
            upload_button_select.classList.remove('loading');
            upload_progress.style.display = 'none';
            upload_progress_value.style.width = '0%';
        };
        const complate = async () => {
            // 管控進(jìn)度條
            index++;
            upload_progress_value.style.width = `${index/count*100}%`;

            // 當(dāng)所有切片都上傳成功，我們合并切片
            if (index < count) return;
            upload_progress_value.style.width = `100%`;
            try {
                data = await instance.post('/upload_merge', {
                    HASH,
                    count
                }, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });
                if (+data.code === 0) {
                    alert(`恭喜您，文件上傳成功，您可以基于 ${data.servicePath} 訪問該文件~~`);
                    clear();
                    return;
                }
                throw data.codeText;
            } catch (err) {
                alert('切片合并失敗，請您稍后再試~~');
                clear();
            }
        };

        // 把每一個切片都上傳到服務(wù)器上
        chunks.forEach(chunk => {
            // 已經(jīng)上傳的無需在上傳
            if (already.length > 0 && already.includes(chunk.filename)) {
                complate();
                return;
            }
            let fm = new FormData;
            fm.append('file', chunk.file);
            fm.append('filename', chunk.filename);
            instance.post('/upload_chunk', fm).then(data => {
                if (+data.code === 0) {
                    complate();
                    return;
                }
                return Promise.reject(data.codeText);
            }).catch(() => {
                alert('當(dāng)前切片上傳失敗，請您稍后再試~~');
                clear();
            });
        });
    });

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

 // 大文件切片上傳 & 合并切片
    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;
            // 創(chuàng)建存放切片的臨時目錄
            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
            });
        }
    });