如何基于js管理大文件上傳及斷點(diǎn)續(xù)傳詳析
更新時(shí)間：2021年08月30日 11:34:20 作者：麥忙
文件上傳是 Web 開發(fā)肯定會(huì)碰到的問題,而文件夾上傳則更加難,下面這篇文章主要給大家介紹了關(guān)于如何基于js管理大文件上傳及斷點(diǎn)續(xù)傳的相關(guān)資料,需要的朋友可以參考下
前言
前端小伙伴們平常在開發(fā)過程中文件上傳是經(jīng)常遇到的一個(gè)問題，也許你能夠?qū)崿F(xiàn)相關(guān)的功能，但是做完后回想代碼實(shí)現(xiàn)上是不是有點(diǎn)"力不從心"呢？你真的了解文件上傳嗎？如何做到大文件上傳以及斷電續(xù)傳呢，前后端通訊常用的格式，文件上傳進(jìn)度管控，服務(wù)端是如何實(shí)現(xiàn)的？接下來讓我們開啟手摸手系列的學(xué)習(xí)吧?。?！如有不足之處，望不吝指教，接下來按照下圖進(jìn)行學(xué)習(xí)探討
一切就緒，開始吧?。?！
前端結(jié)構(gòu)
頁面展示
項(xiàng)目依賴
后端結(jié)構(gòu)(node + express)
目錄結(jié)構(gòu)
Axios的簡(jiǎn)單封裝
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實(shí)現(xiàn)文件上傳
//前端代碼
// 主要展示基于ForData實(shí)現(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('請(qǐng)您先選擇要上傳的文件~~');
return;
}
changeDisable(true);
// 把文件傳遞給服務(wù)器：FormData
let formData = new FormData();
// 根據(jù)后臺(tái)需要提供的字段進(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} 訪問這個(gè)資源~~`);
return;
}
return Promise.reject(data.codeText);
}).catch(reason => {
alert('文件上傳失敗，請(qǐng)您稍后再試~~');
}).finally(() => {
clearHandle();
changeDisable(false);
});
});
基于BASE64實(shí)現(xiàn)文件上傳
BASE64具體方法
export changeBASE64(file) => {
return new Promise(resolve => {
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = ev => {
resolve(ev.target.result);
};
});
};
具體實(shí)現(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) 防止傳輸過程中特殊字符亂碼，同時(shí)后端需要用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('很遺憾，文件上傳失敗，請(qǐng)您稍后再試~~');
} finally {
upload_button_select.classList.remove('loading');
}
**});**
上面這個(gè)例子中后端收到前端傳過來的文件會(huì)對(duì)它進(jìn)行生成一個(gè)隨機(jī)的名字，存下來，但是有些公司會(huì)將這一步放在前端進(jìn)行，生成名字后一起發(fā)給后端，接下來我們來實(shí)現(xiàn)這個(gè)功能
前端生成文件名傳給后端
這里就需要用到上面提到的插件SparkMD5,具體怎么用就不做贅述了，請(qǐng)參考文檔
封裝讀取文件流的方法
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('請(qǐng)您先選擇要上傳的文件~~');
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} 訪問這個(gè)資源~~`);
return;
}
return Promise.reject(data.codeText);
}).catch(reason => {
alert('文件上傳失敗，請(qǐng)您稍后再試~~');
}).finally(() => {
changeDisable(false);
upload_abbre.style.display = 'none';
upload_abbre_img.src = '';
_file = null;
});
});
上傳進(jìn)度管控
這個(gè)功能相對(duì)來說比較簡(jiǎn)單，文中用到的請(qǐng)求庫是axios,進(jìn)度管控主要基于axios提供的onUploadProgress函數(shù)進(jìn)行實(shí)現(xiàn)，這里一起看下這個(gè)函數(shù)的實(shí)現(xiàn)原理
監(jiān)聽xhr.upload.onprogress
文件上傳后得到的對(duì)象
具體實(shí)現(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');
// 驗(yàn)證是否處于可操作性狀態(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('很遺憾，文件上傳失敗，請(qǐng)您稍后再試~~');
} 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)行通訊傳輸，一般還會(huì)結(jié)合斷點(diǎn)繼傳，這時(shí)后端一般提供三個(gè)接口，第一個(gè)接口獲取已經(jīng)上傳的切片信息，第二個(gè)接口將前端切片文件進(jìn)行傳輸，第三個(gè)接口是將所有切片上傳完成后告訴后端進(jìn)行文件合并
進(jìn)行切片，切片的方式分為固定數(shù)量以及固定大小，我們這里兩者結(jié)合一下
// 實(shí)現(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)前切片上傳失敗，請(qǐ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) {}
// 實(shí)現(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('切片合并失敗，請(qǐng)您稍后再試~~');
clear();
}
};
// 把每一個(gè)切片都上傳到服務(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)前切片上傳失敗，請(qǐng)您稍后再試~~');
clear();
});
});
});
服務(wù)端代碼(大文件上傳+斷點(diǎn)續(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)建存放切片的臨時(shí)目錄
let [, HASH] = /^([^_]+)_(\d+)/.exec(filename);
path = `${uploadDir}/${HASH}`;
!fs.existsSync(path) ? fs.mkdirSync(path) : null;
// 把切片存儲(chǔ)到臨時(shí)目錄中
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
});
}
});
總結(jié)
到此這篇關(guān)于如何基于js管理大文件上傳及斷點(diǎn)續(xù)傳的文章就介紹到這了,更多相關(guān)js大文件上傳及斷點(diǎn)續(xù)傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于JavaScript的內(nèi)存與性能問題解決匯總
這篇文章主要介紹了關(guān)于JavaScript的內(nèi)存與性能問題解決匯總，在JavaScript中，頁面中事件處理程序的數(shù)量與頁面整體性能直接相關(guān)，原因有很多，下面就一起來看看具體的總結(jié)吧2022-04-04
當(dāng)前流行的JavaScript代碼風(fēng)格指南
這篇文章主要介紹了當(dāng)前流行的JavaScript代碼風(fēng)格指南,同時(shí)推薦了一款風(fēng)格檢驗(yàn)工具jshint,可以配合大多數(shù)的編輯器統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格,需要的朋友可以參考下2014-09-09
關(guān)于ES6新特性最常用的知識(shí)點(diǎn)匯總
日常開發(fā)中寫的 JavaScript 代碼,會(huì)用到ES6的部分新特性,所以下面這篇文章主要給大家介紹了關(guān)于ES6新特性最常用的知識(shí)點(diǎn),文章總結(jié)的非常全面,需要的朋友可以參考下2021-11-11
使用Promise鏈?zhǔn)秸{(diào)用解決多個(gè)異步回調(diào)的問題
這篇文章主要給大家介紹了使用Promise鏈?zhǔn)秸{(diào)用解決多個(gè)異步回調(diào)問題的方法，文中給出了詳細(xì)的介紹和示例代碼，有需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
簡(jiǎn)單獲取鍵盤的KeyCode...2006-09-09
有時(shí)候在寫JavaScript添加到你的網(wǎng)頁中的時(shí)候，你將需要決定是使用已有的可用的JavaScript庫還是自己寫所有代碼。其中每個(gè)各有優(yōu)缺點(diǎn)，因此沒有任何一種方式對(duì)每個(gè)人來說都是絕對(duì)正確的選擇。2010-01-01
基于javascript實(shí)現(xiàn)listbox左右移動(dòng)
這篇文章主要介紹了基于javascript實(shí)現(xiàn)listbox左右移動(dòng)的相關(guān)資料，以一個(gè)完整的實(shí)例代碼分析了js實(shí)現(xiàn)listbox左右移動(dòng)的相關(guān)技巧，感興趣的小伙伴們可以參考一下2016-01-01
使用JavaScript實(shí)現(xiàn)一個(gè)錄屏插件
不知道大家平時(shí)都是使用什么錄屏軟件呢,有沒有想過只用JavaScript我們也可以快速實(shí)現(xiàn)一個(gè)錄屏插件呢,感興趣的小伙伴就跟隨小編一起學(xué)習(xí)一下吧2024-10-10
BootStrap modal實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了BootStrap modal實(shí)現(xiàn)拖拽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了TS中最常見的聲明合并：接口合并,TS中的聲明合并，指的就是編譯器會(huì)針對(duì)同名的聲明合并為一個(gè)聲明,合并后的聲明會(huì)同時(shí)擁有原先兩個(gè)或多個(gè)聲明的特性,接口的合并也是一樣，它會(huì)將雙方的成員放到一個(gè)同名的接口里，更多詳細(xì)內(nèi)容請(qǐng)參考下面文章內(nèi)容2021-12-12