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 @@
<el-upload :before-upload="beforeUpload"
:on-remove="handleRemove"
:on-error="uploadError"
- :on-success="uploadSuccess"
:before-remove="beforeRemove"
:limit="1"
+ action=""
+ :on-success="uploadSuccess"
:on-exceed="handleExceed"
- :action="api.fileUploadNakadai"
- :headers="headers"
:file-list="fileList"
+ :http-request="handleRequest"
name="file">
<el-button size="small"
type="primary"
@@ -662,9 +662,9 @@
<div slot="tip"
class="el-upload__tip">
- <!-- <el-progress v-if="showProgress"
+ <el-progress v-if="showProgress"
:stroke-width="3"
- :percentage="progressPercent"></el-progress> -->
+ :percentage="uploadProgress"></el-progress>
<p>请上传大小1G以内的文件，支持常见文件格式。</p>
<p>只允许上传一个文件，如有多个文件则需打包再上传。</p>
</div>
@@ -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;
+}
</style>
\ No newline at end of file