阿里云oss（multipartUpload拆成3个接口版本）

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>