关于前端:前端开发之基于js管理大文件上传以及断点续传

56次阅读

共计 9085 个字符，预计需要花费 23 分钟才能阅读完成。

前端构造
• 页面展现

• 我的项目依赖

后端构造 (node + express)
• 目录构造

• 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;
});
复制代码

文件上传个别是基于两种形式，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 具体方法
• 首先须要把文件流转为 BASE64，这里能够封装一个办法 export changeBASE64(file) => {
return new Promise(resolve => {
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = ev => {
resolve(ev.target.result);
};
});
};
复制代码
• 具体实现 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 进行解码
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’);
}
});
复制代码

下面这个例子中后端收到前端传过来的文件会对它前端培训进行生成一个随机的名字，存下来，然而有些公司会将这一步放在前端进行，生成名字后一起发给后端，接下来咱们来实现这个性能
前端生成文件名传给后端
这里就须要用到下面提到的插件 SparkMD5[1], 具体怎么用就不做赘述了，请参考文档
• 封装读取文件流的办法 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}
});
};
});
};
复制代码
• 上传服务器相干代码 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( 文件曾经上传胜利~~, 您能够基于 ${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;
});
});
复制代码

上传进度管控
这个性能相对来说比较简单，文中用到的申请库是 axios, 进度管控次要基于 axios 提供的 onUploadProgress 函数进行实现，这里一起看下这个函数的实现原理
• 监听 xhr.upload.onprogress

• 文件上传后失去的对象

• 具体实现(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’);

// 验证是否处于可操作性状态
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, {
// 文件上传中的回调函数 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();
});
})();
复制代码

大文件上传
大文件上传个别采纳切片上传的形式，这样能够进步文件上传的速度，前端拿到文件流后进行切片，而后与后端进行通信传输，个别还会联合断点继传，这时后端个别提供三个接口，第一个接口获取曾经上传的切片信息，第二个接口将前端切片文件进行传输，第三个接口是将所有切片上传实现后通知后端进行文件合并

• 进行切片，切片的形式分为固定数量以及固定大小，咱们这里两者联合一下 // 实现文件切片解决「固定数量 & 固定大小」
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++;
}
复制代码
• 发送至服务端 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(‘ 以后切片上传失败，请您稍后再试~~’);
clear();
});
});
复制代码
• 文件上传 + 断电续传 + 进度管控 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);

// 获取曾经上传的切片信息
try {
data = await instance.get(‘/upload_already’, {
params: {
HASH
}
});
if (+data.code === 0) {
already = data.fileList;
}
} catch (err) {}

// 实现文件切片解决「固定数量 & 固定大小」
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 () => {
// 管控进度条
index++;
upload_progress_value.style.width = ${index/count*100}%;

// 当所有切片都上传胜利，咱们合并切片
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();
}
};

// 把每一个切片都上传到服务器上
chunks.forEach(chunk => {
// 曾经上传的无需在上传
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(‘ 以后切片上传失败，请您稍后再试~~’);
clear();
});
});
});
复制代码

服务端代码(大文件上传 + 断点续传)
// 大文件切片上传 & 合并切片

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
        });
    }
});

复制代码

正文完
前端
发表至： 前端
2021-09-29
 0
关于前端:JVS低代码开发平台支持纯手工配置的数据加工处理展现的数据仓库
关于前端:亲测海量模型资产库轻松构建数字孪生场景
关于前端:图扑软件-3D-组态编辑器低代码零代码构建数字孪生工厂
关于前端:重构前端知识体系之HTML2022你还会来看HTML吗带你重温亦或走进