上传改为分片上传

src/views/articleManagement/articleCreate.vue

@@ -56,7 +56,8 @@
               <a-select-option
                 v-for="(item, index) in articleParentClassArr"
                 :key="index"
-              >{{ articleParentClassArr[index].name }}</a-select-option>
+                >{{ articleParentClassArr[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="文章子类">
@@ -80,7 +81,8 @@
               <a-select-option
                 v-for="(item, index) in articleChildClassArr"
                 :key="index"
-              >{{ articleChildClassArr[index].name }}</a-select-option>
+                >{{ articleChildClassArr[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="工种类别">
@@ -97,7 +99,8 @@
               <a-select-option
                 v-for="(item, index) in engineerTypeArray"
                 :key="index"
-              >{{ engineerTypeArray[index].name }}</a-select-option>
+                >{{ engineerTypeArray[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="必学日期:">
@@ -119,7 +122,9 @@
             />
           </a-form-item>
           <a-form-item v-show="false" :wrapper-col="{ span: 20, offset: 10 }">
-            <a-button id="articleCreateSubmit" type="primary" html-type="submit">提交</a-button>
+            <a-button id="articleCreateSubmit" type="primary" html-type="submit"
+              >提交</a-button
+            >
           </a-form-item>
         </a-form>
       </div>
@@ -135,15 +140,15 @@
             :default-file-list="defaultFileList"
             :remove="removeOssFile"
           >
-            <a-button>
-              <a-icon type="upload" />点击上传
-            </a-button>
+            <a-button> <a-icon type="upload" />点击上传 </a-button>
           </a-upload>
         </div>
       </div>
       <div class="submit-row">
         <a-button type="primary" @click="handleSubmitBtnFun">提交</a-button>
-        <a-button :style="{ marginLeft: '160px' }" @click="preview">预览</a-button>
+        <a-button :style="{ marginLeft: '160px' }" @click="preview"
+          >预览</a-button
+        >
       </div>
     </div>
     <!-- 预览弹出框 -->
@@ -508,18 +513,29 @@ export default {
           bucket: bucket
         });
         let fileName = new Date().getTime() + "_" + file.name;
+        let options = {
+          progress: function(p) {
+            // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
+            console.log("-----" + JSON.stringify(p));
+            //   console.log("-----" + JSON.stringify(checkpoint));
+          },
+          patrtSize: 1000 * 1024, // 设置分片大小
+          timeout: 1000 * 60 * 10 // 超时时间
+        };
         try {
-          client.put(ossPath + fileName, file).then(res => {
-            console.log(res);
-            let upFile = {
-              uid: this.getUid(),
-              name: fileName,
-              status: "done",
-              url: res.url
-            };
-            this.defaultFileList.push(upFile);
-            fileData.onSuccess();
-          });
+          client
+            .multipartUpload(ossPath + fileName, file, options)
+            .then(res => {
+              console.log(res);
+              let upFile = {
+                uid: this.getUid(),
+                name: fileName,
+                status: "done",
+                url: res.url
+              };
+              this.defaultFileList.push(upFile);
+              fileData.onSuccess();
+            });
         } catch (e) {
           fileData.onError();
           console.error(e);

src/views/articleManagement/videoCreate.vue

@@ -56,7 +56,8 @@
               <a-select-option
                 v-for="(item, index) in articleParentClassArr"
                 :key="index"
-              >{{ articleParentClassArr[index].name }}</a-select-option>
+                >{{ articleParentClassArr[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="文章子类">
@@ -80,7 +81,8 @@
               <a-select-option
                 v-for="(item, index) in articleChildClassArr"
                 :key="index"
-              >{{ articleChildClassArr[index].name }}</a-select-option>
+                >{{ articleChildClassArr[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="工种类别">
@@ -97,7 +99,8 @@
               <a-select-option
                 v-for="(item, index) in engineerTypeArray"
                 :key="index"
-              >{{ engineerTypeArray[index].name }}</a-select-option>
+                >{{ engineerTypeArray[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="必学日期:">
@@ -119,7 +122,9 @@
             />
           </a-form-item>
           <a-form-item v-show="false" :wrapper-col="{ span: 20, offset: 10 }">
-            <a-button id="articleCreateSubmit" type="primary" html-type="submit">提交</a-button>
+            <a-button id="articleCreateSubmit" type="primary" html-type="submit"
+              >提交</a-button
+            >
           </a-form-item>
         </a-form>
       </div>
@@ -146,9 +151,7 @@
           :remove="removeOssVideoFile"
           class="upload-list-inline"
         >
-          <a-button>
-            <a-icon type="upload" />点击上传
-          </a-button>
+          <a-button> <a-icon type="upload" />点击上传 </a-button>
         </a-upload>
       </div>
       <div style="margin-bottom: 10px">上传封面</div>
@@ -160,14 +163,14 @@
           :remove="removeOssImageFile"
           class="upload-list-inline"
         >
-          <a-button>
-            <a-icon type="upload" />点击上传
-          </a-button>
+          <a-button> <a-icon type="upload" />点击上传 </a-button>
         </a-upload>
       </div>
       <div class="submit-row">
         <a-button type="primary" @click="handleSubmitBtnFun">提交</a-button>
-        <a-button :style="{ marginLeft: '160px' }" @click="preview">预览</a-button>
+        <a-button :style="{ marginLeft: '160px' }" @click="preview"
+          >预览</a-button
+        >
       </div>
     </div>
 
@@ -186,7 +189,9 @@
         :poster="faceUrl"
         :src="videoUrl"
         controls="controls"
-      >您的浏览器不支持 video 标签。</video>
+      >
+        您的浏览器不支持 video 标签。
+      </video>
       <div v-else>暂未上传视频</div>
     </a-drawer>
   </div>
@@ -545,8 +550,39 @@ export default {
         bucket: bucket
       });
       let fileName = new Date().getTime() + "_" + file.name;
+      // 普通上传
+      // try {
+      //   client.put(ossPath + fileName, file).then(res => {
+      //     console.log(res);
+      //     let upFile = {
+      //       uid: this.getUid(),
+      //       name: fileName,
+      //       status: "done",
+      //       url: res.url
+      //     };
+      //     that.videoUrl = res.url;
+      //     that.defaultVideoFileList.push(upFile);
+      //     //   this.findvideocover(file);
+      //     fileData.onSuccess();
+      //   });
+      // } catch (e) {
+      //   fileData.onError();
+      //   console.error(e);
+      // }
+      // 分片上传
+      console.log("---upload-start--" + new Date().getTime());
+      let options = {
+        progress: function(p) {
+          // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
+          console.log("-----" + JSON.stringify(p));
+          //   console.log("-----" + JSON.stringify(checkpoint));
+        },
+        patrtSize: 1000 * 1024, // 设置分片大小
+        timeout: 1000 * 60 * 10 // 超时时间
+      };
       try {
-        client.put(ossPath + fileName, file).then(res => {
+        client.multipartUpload(ossPath + fileName, file, options).then(res => {
+          console.log("---upload-end--" + new Date().getTime());
           console.log(res);
           let upFile = {
             uid: this.getUid(),
@@ -561,6 +597,7 @@ export default {
         });
       } catch (e) {
         fileData.onError();
+        console.error("-aaaaaaaaaa---");
         console.error(e);
       }
     },
@@ -585,8 +622,18 @@ export default {
         bucket: bucket
       });
       let fileName = new Date().getTime() + "_" + file.name;
+      console.log("---upload-start--" + new Date().getTime());
+      let options = {
+        progress: function(p) {
+          // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
+          console.log("-----" + JSON.stringify(p));
+          //   console.log("-----" + JSON.stringify(checkpoint));
+        },
+        patrtSize: 1000 * 1024, // 设置分片大小
+        timeout: 1000 * 60 * 10 // 超时时间
+      };
       try {
-        client.put(ossPath + fileName, file).then(res => {
+        client.multipartUpload(ossPath + fileName, file, options).then(res => {
           console.log(res);
           let upFile = {
             uid: this.getUid(),