From 63dccce56b996cae4a3fff7dade0eeb476f0d65f Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Tue, 21 Nov 2023 16:04:31 +0800 Subject: [PATCH] =?UTF-8?q?=E9=98=BF=E9=87=8C=E4=BA=91oss=EF=BC=88multipar?= =?UTF-8?q?tUpload=E6=8B=86=E6=88=903=E4=B8=AA=E6=8E=A5=E5=8F=A3=E7=89=88?= =?UTF-8?q?=E6=9C=AC=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/match/details/index.vue | 155 +++++++++++++++++++++--------- 1 file changed, 110 insertions(+), 45 deletions(-) diff --git a/src/pages/match/details/index.vue b/src/pages/match/details/index.vue index 0c72e78..7e8cae1 100644 --- a/src/pages/match/details/index.vue +++ b/src/pages/match/details/index.vue @@ -648,13 +648,13 @@ - + :percentage="uploadProgress">

请上传大小1G以内的文件，支持常见文件格式。

只允许上传一个文件，如有多个文件则需打包再上传。

@@ -809,6 +809,17 @@ export default { curFileId: '', showProgress: false, progressPercent: 0, + + + client: null, + chunkSize: 5 * 1024 * 1024, + chunkArr: [], + showProgress: false, + uploadProgress: 0, + uploadId: '', + fileName: '', + size: 0, + }; }, computed: { @@ -832,6 +843,8 @@ export default { this.getProgress() this.getNotice() this.getTeam() + + this.initOss() }, methods: { ...mapMutations('match', [ @@ -1428,18 +1441,103 @@ export default { } }, - + initOss () { + this.client = new OSS({ + region: 'oss-cn-shenzhen', + accessKeyId: 'LTAI4FzqQHnk4rozqLZ8jCNj', + accessKeySecret: 'mveW7B1OyFoKUkHm8WsxmrjHmkJWHq', + bucket: 'huoran' + }) + }, // 附件上传前 beforeUpload (file) { const oversize = file.size / 1024 / 1024 < 1000 if (!oversize) util.warningMsg('请上传小于1GB的附件！') if (oversize) { - this.showProgress = true + // this.uploadFile(file) return true } else { return false } }, + progress1 (p, _checkpoint) { + // Object的上传进度。 + console.log(p); + // 分片上传的断点信息。 + console.log(_checkpoint); + }, + async uploadFile (file) { + const result = await this.client.multipartUpload(file.name, file, { + progress: this.progress1 + }); + console.log(33, result); + return + + + + // this.chunkArr = []; + // this.showProgress = true + // this.uploadProgress = 0; + // //获取文件分片的结果数组 + // this.chunks = this.sliceFile(file); + // const { name: fileName, type: mimeType } = file; + // this.fileName = fileName; + // //初始化分片上传，获取Upload ID + // const result = await this.client.initMultipartUpload(fileName); + // this.uploadId = result.uploadId; + // //分片上传 + // this.uploadChunk(this.chunks[0], 1); + }, + sliceFile (file) { + const fileSize = file.size; + this.size = file.size; + const chunks = Math.ceil(fileSize / this.chunkSize); // 计算分片总数 + const allChunks = []; + for (let i = 0; i < chunks; i++) { + const start = i * this.chunkSize; + const end = Math.min(start + this.chunkSize, fileSize); + const chunk = file.slice(start, end); + allChunks.push(chunk); + } + return allChunks; + }, + + async uploadChunk (chunk, partNumber) { + //上传分片 + const part = await this.client.uploadPart( + this.fileName, + this.uploadId, + partNumber, + chunk, + 0, + chunk.size + ); + this.chunkArr.push({ number: partNumber, etag: part.etag }); + // 获取进度 + this.uploadProgress = Number( + ((partNumber / this.chunks.length) * 100).toFixed(2) + ); + if (partNumber < this.chunks.length) { + //分片上传成功 + partNumber++; + this.uploadChunk(this.chunks[partNumber - 1], partNumber); + } else { + // 分片全部上传完毕 + const res = await this.client.completeMultipartUpload( + this.fileName, + this.uploadId, + this.chunkArr + ); + this.showProgress = false + console.log("🚀 ~ file: index.vue:1513 ~ uploadChunk ~ res:", 'http://huoran.oss-cn-shenzhen.aliyuncs.com/' + res.name) + } + }, + // 自定义上传 + async handleRequest ({ file }) { + this.uploadFile(file) + }, + + uploadError (err, file, fileList) { this.$message({ message: "上传出错，请重试！", @@ -1461,6 +1559,8 @@ export default { }).catch(res => { }) }, uploadSuccess (res) { + console.log("🚀 ~ file: index.vue:1541 ~ uploadSuccess ~ res:", res) + return const result = res.filesResult // 有上传记录，则删除上次的文件 this.handleRemove() @@ -1482,44 +1582,6 @@ export default { util.successMsg(`上传成功！`); }).catch(res => { }) }, - progress (p, _checkpoint) { - // Object的上传进度。 - console.log(p); - // 分片上传的断点信息。 - console.log(_checkpoint); - }, - // 自定义上传 - async handleRequest (options) { - const { file } = options - const headers = { - // 指定Object的存储类型。 - 'x-oss-storage-class': 'Standard', - // 指定Object的访问权限。 - // 'x-oss-object-acl': 'private', - // 通过文件URL访问文件时，指定以附件形式下载文件，下载后的文件名称定义为example.txt。 - // 'Content-Disposition': 'attachment; filename="example.txt"', - // 设置Object的标签，可同时设置多个标签。 - 'x-oss-tagging': 'Tag1=1&Tag2=2', - // 指定PutObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。 - 'x-oss-forbid-overwrite': 'true', - }; - const client = new OSS({ - region: 'oss-cn-shenzhen', - accessKeyId: 'LTAI4FzqQHnk4rozqLZ8jCNj', - accessKeySecret: 'mveW7B1OyFoKUkHm8WsxmrjHmkJWHq', - bucket: 'huoran' - }) - const res = await client.multipartUpload(file.name, file, { - progress: this.progress, - // headers, - // 指定meta参数，自定义Object的元信息。通过head接口可以获取到Object的meta数据。 - meta: { - year: 2020, - people: 'test', - } - }) - console.log("🚀 ~ file: index.vue:1505 ~ handleRequest ~ res:", res) - }, // 提交阶段内容 stageSubmit () { if (this.submiting) return false @@ -2081,4 +2143,7 @@ export default { /deep/.el-upload__tip { color: #727272; } +/deep/.el-progress { + white-space: nowrap; +} \ No newline at end of file