因业务需求，需要上传和下载大文件，所以基于elementui封装了一个附件上传下载的组件，记录一下，供有需要的伙伴参考。
1、上传时，由前端将文件分割成25M一片的大小，传给后台，所有片数都上传完毕再调用后台的合并分片方法完成整个文件的上传。
2、下载时，我提供了两种方式，一种是按照分片的顺序一片一片下载，最后前端将所有片合并成一个文件；另一种是同时发送所有片的下载请求，通过promise all将所有片合并。下载分片时，后台返回的是文件流的格式，需要在axios请求中设置responseType: ‘blob’。
<template><div><el-upload v-if="!disabled" action="#" :headers="headers" :file-list="fileList":before-upload="handleBeforeUpload" :data="data" :show-file-list="false" :http-request="uploadRequest"><el-button size="small" type="primary" :loading="loading">点击上传</el-button><div slot="tip" class="el-upload__tip" v-if="showTips"><span v-if="isCheckType">只能上传{{ fileType.join('/') }}文件</span><span v-if="isCheckSize">，且不超过{{ fileSize }}MB</span></div></el-upload><!-- 文件列表 --><div v-for="(item, index) in fileList" :key="index" class="fileList" style="display: flex;"><img src="./images/pdf.png" mode="" v-if="fileHz(item) == 'pdf'" @click="down(item)"></img><img src="./images/zip.png" mode="" v-else-if="fileHz(item) == 'zip' || fileHz(item) == 'rar'"@click="down(item)"></img><img src="./images/txt.png" mode="" v-else-if="fileHz(item) == 'txt'" @click="down(item)"></img><img src="./images/ppt.png" mode="" v-else-if="fileHz(item) == 'ppt'" @click="down(item)"></img><img src="./images/xls.png" mode="" v-else-if="fileHz(item) == 'xls' || fileHz(item) == 'xlsx'"@click="down(item)"></img><img src="./images/doc.png" mode="" v-else-if="fileHz(item) == 'doc' || fileHz(item) == 'docx'"@click="down(item)"></img><img src="./images/mp3.png" mode=""v-else-if="fileHz(item) == 'mp3' || fileHz(item) == 'wav' || fileHz(item) == 'wma'" @click="down(item)"></img><img src="./images/mp4.png" mode=""v-else-if="fileHz(item) == 'mp4' || fileHz(item) == 'avi' || fileHz(item) == 'mov'" @click="down(item)"></img><img src="./images/fj.png" mode="" v-else></img><!-- <el-image v-else class="images" :src="item.fileUrl" :preview-src-list="[item.fileUrl]"></el-image> --><div class="filename">{{ item.fileName || item.name }}</div><el-button type="primary" size="mini" @click="fpDown(item, index)" class="yulan":loading="downloading[index].loading">{{ downloading[index].loading ?`正在下载（${downloading[index].percent}%）` : '下载' }}</el-button><el-button type="danger" size="mini" @click.stop="handleDelete(item)" v-show="!disabled">删除</el-button></div><el-progress v-show="showProgress" :percentage="progressPercent"></el-progress></div>
</template><script>
/*** @Date 2025-02-20* @Description 大文件上传下载组件*/
import { getToken } from "@/utils/auth";
import { initializeUploadId, uploadChunk, completeUpload, download, rangeDownload } from '@/api/rcxjsp';export default {name: 'filesUpload',props: {value: {type: Array,default: () => { return [] }},data: {type: Object,default: () => ({path: 'rcxjsp'})},isCheckSize: { //是否要校验文件大小type: Boolean,default: true},fileSize: { // 大小限制(MB)type: Number,default: 10,},isCheckType: { //是否要校验文件类型type: Boolean,default: true},fileType: {type: Array,default: () => ['pdf', "doc", "docx", "xls", "xlsx", "ppt", "txt", "png", "jpg", "jpeg", 'mp4'],},disabled: {type: Boolean,default: false},extra: {type: Object,default: () => ({key: 'tag',value: '1'})},isExtra: { //是否需要通过extra合并处理附件type: Boolean,default: false},showTips: { //是否要展示提示信息type: Boolean,default: true}},data() {return {headers: { Authorization: "Bearer " + getToken() },uploadurl: process.env.VUE_APP_BASE_API + "/common/uploadEx",fileList: [],progressPercent: 0, // 进度条百分比showProgress: false,extraList: [], //其他extra值需要保留下来currentFile: {},loading: false,downloading: [],}},watch: {value: {immediate: true,handler(newValue, oldValue) {if (newValue && newValue.length > 0) {if (this.isExtra) { //如果是合并的需要过滤当前需要展示的数据,还需要将其他的不匹配的数据保留下来this.fileList = newValue.filter(i => i[this.extra.key] == this.extra.value);this.extraList = newValue.filter(i => i[this.extra.key] != this.extra.value);} else {this.fileList = newValue;}} else {this.fileList = [];}this.downloading = new Array(this.fileList.length).fill({ loading: false, percent: 0 });}},},methods: {handleBeforeUpload(file) {if (this.fileType.length) {const fileName = file.name.split('.');const fileExt = fileName[fileName.length - 1];const isTypeOk = this.fileType.indexOf(fileExt) >= 0;if (this.isCheckType && !isTypeOk) {this.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`);return false;}}if (this.isCheckSize && this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}return true;},uploadRequest(params) {this.currentFile.fileName = params.file.name;this.showProgress = true;this.loading = true;let formdata = new FormData();formdata.append('file', params.file);formdata.append('path', this.data.path);formdata.append('fileName', params.file.name);initializeUploadId({ fileName: params.file.name, path: this.data.path }).then(res => {this.currentFile = res.data;const chunkSize = 1024 * 1024 * 25; // 每个切片的大小（这里设置为25MB）const totalChunks = Math.ceil(params.file.size / chunkSize);let currentChunk = 0;const uploadNextChunk = () => {const start = currentChunk * chunkSize;const end = Math.min((currentChunk + 1) * chunkSize, params.file.size);let chunkData = params.file.slice(start, end);let formdata = new FormData();formdata.append('file', chunkData);formdata.append('uploadId', this.currentFile.uploadId);formdata.append('objectKey', this.currentFile.objectKey);formdata.append('chunkIndex', currentChunk + 1);uploadChunk(formdata).then(res => {currentChunk++;this.progressPercent = +Math.floor((currentChunk / totalChunks) * 100).toFixed(0);if (currentChunk < totalChunks) {uploadNextChunk();} else {// 所有切片上传完成this.progressPercent = 100;this.completeUpload();}}).catch((error) => {this.msgError(`切片上传失败！`);this.loading = false;this.showProgress = false;this.progressPercent = 0;});};uploadNextChunk();})},completeUpload() {completeUpload({ ...this.currentFile }).then(res => {let fileitem = {name: res.data.fileName,fileName: res.data.fileName,url: res.data.fileUrl,fileUrl: res.data.fileUrl,fileLength: res.data.fileLength}if (this.isExtra) {fileitem[this.extra.key] = this.extra.value}this.fileList.push(fileitem)this.$emit('input', this.fileList.concat(this.extraList));}).catch(() => {this.msgError(`切片合并失败！`);}).finally(() => {this.showProgress = false;this.progressPercent = 0;this.loading = false;})},handleDelete(index) {this.fileList.splice(index, 1);this.$emit('input', this.fileList.concat(this.extraList));},fileHz(file) {const name = file.fileName || file.name;if (name) {var index = name.lastIndexOf(".");var ext = name.substr(index + 1);return ext}},down(e, index) {this.downloading.splice(index, 1, { loading: true, percent: 0 });download({ fileName: e.fileName }).then(response => {let url = window.URL.createObjectURL(new Blob([response], { type: 'application/octet-stream' }));let link = document.createElement("a");link.style.display = "none";link.href = url;link.setAttribute("download", e.fileName);document.body.appendChild(link);link.click();URL.revokeObjectURL(url);}).finally(() => {this.downloading.splice(index, 1, { loading: false, percent: 100 });})},singleDown(totalChunks, chunks, index, fileName, start, end, fileLength) {return new Promise((resolve, reject) => {rangeDownload({ fileName, start, end, fileLength }).then(bolb => {chunks.push(bolb);let percent = +Math.floor((chunks.length / totalChunks) * 100).toFixed(0);this.downloading.splice(index, 1, { loading: true, percent: percent });resolve();}).catch((error) => {this.msgError(`切片下载失败！`);this.downloading.splice(index, 1, { loading: false, percent: 0 });reject();});})},// fpDown(e, index) { //分片下载（异步下载，同时下载多个分片）// this.downloading.splice(index, 1, { loading: true, percent: 0 });// const chunkSize = 1024 * 1024 * 25; // 每个切片的大小（这里设置为25MB）// const totalChunks = Math.ceil(e.fileLength / chunkSize);// const chunks = [];// const arrays = [];// for (let i = 0; i < totalChunks; i++) {// let start = i * chunkSize;// let end = Math.min((i + 1) * chunkSize, e.fileLength);// arrays.push(this.singleDown(totalChunks, chunks, index, e.fileName, start, end, e.fileLength));// }// Promise.all(arrays).then(() => {// const mergedBlob = new Blob(chunks);// const downloadUrl = window.URL.createObjectURL(mergedBlob);// const link = document.createElement('a');// link.href = downloadUrl;// link.setAttribute('download', e.fileName);// link.click();// window.URL.revokeObjectURL(downloadUrl);// this.downloading.splice(index, 1, { loading: false, percent: 100 });// }).catch(error => {// this.msgError(`切片合并失败！`);// })// },fpDown(e, index) { //分片下载同步下载（按顺序一个一个下载）this.downloading.splice(index, 1, { loading: true, percent: 0 });const chunkSize = 1024 * 1024 * 25; // 每个切片的大小（这里设置为25MB）const totalChunks = Math.ceil(e.fileLength / chunkSize);let currentChunk = 0;const chunks = [];const download = () => {const start = currentChunk * chunkSize;const end = Math.min((currentChunk + 1) * chunkSize, e.fileLength);rangeDownload({ fileName: e.fileName, start: start, end: end, fileLength: e.fileLength }).then(bolb => {currentChunk++;let percent = +Math.floor((currentChunk / totalChunks) * 100).toFixed(0);this.downloading.splice(index, 1, { loading: true, percent: percent });chunks.push(bolb);if (currentChunk < totalChunks) {download();} else {this.downloading.splice(index, 1, { loading: false, percent: 100 });const mergedBlob = new Blob(chunks);const downloadUrl = window.URL.createObjectURL(mergedBlob);const link = document.createElement('a');link.href = downloadUrl;link.setAttribute('download', e.fileName);link.click();window.URL.revokeObjectURL(downloadUrl);}}).catch((error) => {this.msgError(`切片下载失败！`);this.downloading.splice(index, 1, { loading: false, percent: 0 });});}download();}}
}
</script><style lang="scss" scoped>
.fileList {display: flex;align-items: center;margin-bottom: 10px;img,.el-image {width: 40px;height: 40px;margin-right: 10px;}div.filename {flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}el-button.yulan {margin-left: 10px;}el-button.delete {margin-left: 10px;}
}
</style>
