页面定义
<input type="file" webkitdirectory="true" directory="true" @click="onupclick" @change="uploadFiles" style="width: 70px" />
<div style="margin-left: 20px" class="dp-flex"><span>压缩打包进度</span><el-progress style="width: 200px" :text-inside="true" :stroke-width="20" :percentage="percentage" />
</div>
<div style="margin-left: 20px" class="dp-flex"><span>上传进度</span><el-progress style="width: 200px" :text-inside="true" :stroke-width="20" :percentage="pcuploadRate" />
</div>
变量定义
const percentage = ref(0);
/**pc发布进度*/
let pcuploadRate = ref(0);
/**清楚数据,和文件缓存*/
function onupclick(e: any) {percentage.value = 0;e.target.files = null;e.target.value = '';pcuploadRate.value = 0;
}
/**change事件*/
async function uploadFiles(e) {console.log('e.target.files', e.target.files);let arr = e.target.files[0].webkitRelativePath.split('/');//可以判断上传压缩的的文件名对不对let filename = arr[0];if (filename != 'dist') {ElMessage({showClose: true,message: '选择的文件夹错误,请重新选择',type: 'error',duration: 0,});return;}let res = await zipFile(2, e.target.files);
const file = new File([res], 'projectdist.zip');upzip({ ftype: 1, file: file, mode: mode.value });console.log('file', file);
}
/**压缩函数*/
async function zipFile(index: number, fileList: FileList, onProgress: (added: number) => void) {const zip = new JSZip();let i = 0;for await (let f of fileList) {const fileData = await readAsArrayBuffer(f);zip.file(f.webkitRelativePath, fileData, { createFolders: true });i++;onProgress && onProgress(i);}
return zip.generateAsync({ type: 'blob', compression: 'DEFLATE', compressionOptions: { level: 9 } }, function updateCallback(metadata) {// 更新进度条,多个条件判断if (index == 2) {percentage.value = +metadata.percent.toFixed(2);} else if (index == 3) {wxpercentage.value = +metadata.percent.toFixed(2);} else {schedule.value = +metadata.percent.toFixed(2);}// console.log('进度条', metadata.percent.toFixed(2) + '% done');});
}
/*************************************************************************************************/
async function readAsArrayBuffer(file: Blob): Promise<ArrayBuffer> {return new Promise((resolve, reject) => {let reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = () => {resolve(reader.result as ArrayBuffer);};reader.onloadend = () => {reject('FileReader failed');};});
}
/*************************************上传************************************************************/
async function upzip(formData: any) {let config = {onUploadProgress: function (e) {console.log('进度：');console.log(e);//属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量//如果lengthComputable为false，就获取不到e.total和e.loadedif (formData.ftype == 1) {if (e.progress.toFixed(2) < 1) {pcuploadRate.value = e.progress.toFixed(2) * 100;}} else {if (e.progress.toFixed(2) < 1) {wxuploadRate.value = e.progress.toFixed(2) * 100;}}// if (e.lengthComputable) {// var rate = (uploadRate = e.loaded / e.total); //已上传的比例// if (rate < 1) {// //这里的进度只能表明文件已经上传到后台，但是后台有没有处理完还不知道// //因此不能直接显示为100%，不然用户会误以为已经上传完毕，关掉浏览器的话就可能导致上传失败// //等响应回来时，再将进度设为100%// uploadRate = rate;// }// }},};let param = { formData, config };try {const { code, msg } = await upload_file_byftype(param);if (code > 0) {//请求回来之后再设置为100%pcuploadRate.value = 100;ElMessage({showClose: true,message: '上传成功',type: 'success',});} else {ElMessage({showClose: true,message: '上传失败' + msg,type: 'error',duration: 0,});}} catch (e) {ElMessage({showClose: true,message: '错误: ' + e,type: 'error',duration: 0,});}
}
接口定义
/********接口定义*********/
//onUploadProgress是实时返回的
export function upload_file_byftype(param: any) {return request({url: '/xxx/upload_file_byftype',method: 'post',data: param.formData,headers: { 'Content-type': 'multipart/form-data' },onUploadProgress: param.config.onUploadProgress,});
}
