需求
文件上传，如果文件大小小于5M 则直接上传，否则需要切割文件，每个最大5M 大小进行上传。
技术选型
- axios
服务器端提供的接口
/**
* data:传参，是一个formData 对象
* processCallback ：监听process的函数
* cancelFun ：取消函数
*/
function uploadFile(data, processCallback, cancelFun) {
return request({
url: '/upload',
method: 'post',
data,
onUploadProgress: processCallback,
cancelToken: new CancelToken(function excutor(c) {
cancelFun.cancel = c;
})
})
}
/**
* data:传参，是一个formData 对象
* processCallback ：监听process的函数
* cancelFun ：取消函数
*/
function uploadFileBlock(data, processCallback, cancelFun){
return request({
url: _prefix + '/upload/block',
method: 'post',
data,
onUploadProgress: processCallback,
cancelToken: new CancelToken(function excutor(c) {
cancelFun.cancel = c;
})
})
}
首先看下如果文件大小小于5M
<!-- process 方法 -->
function _processCallback(progressEvent) => {
<!--完成百分比-->
let complete = (progressEvent.loaded / progressEvent.total * 100 | 0);
this.progress = complete;
}
let _cancelUploadObj = {
};
<!-- 上传方法 -->
function doUploadFile(uploadFile) {
let file = uploadFile;
let formData = new FormData();
formData.append('file', file);
uploadFile(formData, _processCallback ,_cancelUploadObj).then(()=> {
// success
}).catch(() => {
// error
})
}
<!--调用取消方法-->
function doCancel(){
cancelUploadObj && cancelUploadObj.cancel && cancelUploadObj = {
};.cancel();
cancelUploadObj = {
};
}
如果文件大小大于5M的情况下
const MAX_FILE_SIZE = 5 * 1024 * 1024;
let _cancelUploadObj = {
};
function doUploadFileBlock(uploadFile) {
let index = 1;
let file = uploadFile;
const fileSize = file.size;
let start = 0;
let end = 0;
let that = this;
function handleUploadSuccess() {
// upload success
}
function handleUploadError() {
// upload error
}
function _handleUploadProgress(progressEvent) {
<!--这里的上传百分比是切割块的百分比，所以要结合整个文件的大小算上传百分比。-->
let percent = parseInt((progressEvent.loaded + start) / fileSize * 100, 10);
// 如果格式话之后超过了100%之后，直接变成100%
if (percent > 100) {
percent = 100;
}
this.progress = percent;
}
function uploadFileByBlock() {
if (start + MAX_FILE_SIZE >= fileSize) {
end = fileSize;
} else {
end = start + MAX_FILE_SIZE;
}
const fileBlock = file.slice(start, end);
const form = new FormData();
<!--数据内容-->
form.append('file', fileBlock);
<!--第几块数据-->
form.append('index', index);
<!--上传数据大小-->
form.append('size', end - start);
uploadFileBlock(form, _handleUploadProgress, _cancelUploadObj).then((data) => {
if (start + MAX_FILE_SIZE >= fileSize) {
handleUploadSuccess();
} else {
start += MAX_FILE_SIZE;
index += 1;
uploadFileByBlock();
}
}).catch(() => {
handleUploadError();
});
}
uploadFileByBlock();
}
<!--调用取消方法-->
function doCancel(){
cancelUploadObj && cancelUploadObj.cancel && cancelUploadObj = {
};.cancel();
cancelUploadObj = {
};
}