wordpress网站导入,越秀网站建设推广,自建网站营销,网站搭建维护淄博公司要求实现的功能#xff0c;大概思路是将上传的文件通过jsZip压缩后#xff0c;进行切片#xff0c;留一下总切片#xff0c;当前片#xff0c;并把这些数据给后端#xff0c;至于前端的校验#xff0c;是由Md5完成的#xff0c;验证文件唯一性#xff0c;这样下次…公司要求实现的功能大概思路是将上传的文件通过jsZip压缩后进行切片留一下总切片当前片并把这些数据给后端至于前端的校验是由Md5完成的验证文件唯一性这样下次上传该文件的时候就会略过并更新已经上传过的切片开始下一片的续传。 首先是创建一个上传按钮绑定上传事件我这边是需要放在表格里并且需要是base64格式所以有个转换具体看个人需求 importModel() {this.fileIndex 0const input document.createElement(input);input.type file;input.onchange (event) {let selectedFiles this.fileFilter(event.target.files);if (selectedFiles.length 0) {const zip new JSZip();for (let i 0; i selectedFiles.length; i) {zip.file(selectedFiles[i].name, selectedFiles[i], { date: new Date(2023, 0, 1) });}zip.generateAsync({ type: base64 }).then((content) {zip.generateAsync({ type: uint8array }).then(content1 {this.fileData [{ file: content, fileMd5: md5(content1), zipInfo: {}, type: 文件名 .zip, std: 50%, address: 删除, progressValue: 0 }];})});this.compress false;}else {this.$message.error(请上传有效文件);}};input.click();},
接下来是上传的方法 uploadFiles() {if (this.fileIndex this.fileData.length)
//下面这个接口是跟后端约定好的需要的参数个人需求可以不用走这边拿到返回的id再带给下一个方法实际接口({size://压缩后返回的大小,fileName: 实际上传的文件名//}).then(response {this.indexedDBHelper.get(this.fileData[this.fileIndex].fileMd5).then((d) {if (d)this.fileData[this.fileIndex].zipInfo d.dataelsethis.fileData[this.fileIndex].zipInfo {id: 后端带回来的id看个人需求,fileSize:this.fileData[this.fileIndex].file.length,chunkSize: 4 * 1024 * 1024,chunkCount: Math.ceil(文件大小 / (4 * 1024 * 1024)),currentChunk: 0, //初始上传切片}this.uploadNextChunk()})});elseconsole.log(全部上传完成)},///上传文件切片uploadNextChunk() {let { currentChunk, chunkCount } this.fileData[this.fileIndex].zipInfoif ((currentChunk) chunkCount) {this.uploadChunk().then(response {this.showConnectingMessage false;if (response?.data) {this.$set(this.fileData[this.fileIndex], progressValue, Math.round(((currentChunk 1) / chunkCount) * 100));//更新进度条this.fileData[this.fileIndex].zipInfo.currentChunk 1this.uploadNextChunk();this.indexedDBHelper.set({ id: this.fileData[this.fileIndex].fileMd5, data: this.fileData[this.fileIndex].zipInfo })//保存md5及信息到indexDB}});} else {this.$set(this.fileData[this.fileIndex], progressValue, 100);this.indexedDBHelper.delete(this.fileData[this.fileIndex].fileMd5)//上传完成清空md5this.fileIndex 1this.uploadFiles()}},///调用后端接口uploadChunk() {let start (this.fileData[this.fileIndex].zipInfo.currentChunk) * this.fileData[this.fileIndex].zipInfo.chunkSize;let end Math.min(this.fileData[this.fileIndex].zipInfo.fileSize, start this.fileData[this.fileIndex].zipInfo.chunkSize);let chunkFile this.fileData[this.fileIndex].file.slice(start, end);const uploadData {id: this.fileData[this.fileIndex].zipInfo.id,fileBase64: Base64, chunkFile,fileName: this.fileData[this.fileIndex].zipInfo.fileName,size: chunkFile.length,chunks: this.fileData[this.fileIndex].zipInfo.chunkCount,chunk: this.fileData[this.fileIndex].zipInfo.currentChunk,md5: this.fileData[this.fileIndex].flieMd5,};return 后端接口(uploadData); //将数据发送给后端接口},
最后是删除方法绑定在按钮上就可以
deleteItem() {MessageBox.confirm(确定删除该文件吗, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {后端接口(this.fileData[this.fileIndex].zipInfo.id)//将需要删除的id发送给后端.then(response {const index this.fileData.findIndex(item item.id this.fileData[this.fileIndex].zipInfo.id);if (index ! -1) {this.fileData.splice(index, 1);}}).catch(error {console.error(删除文件时出错, error);});}).catch(() {});}, 虽然这个功能可以实现续传整个流程也通了但是有个问题就是无法承担太大的文件如果需求是中小文件的话是可以用的超大文件的话会崩。
