增加上传文件取消提示

.env.production

@@ -3,13 +3,13 @@ ENV = 'production'
 # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
 # 测试
-# VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
+VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
 
 # 生产
 # VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
 
 # 预发布接口
-VUE_APP_BASE_API  = 'https://pre-cashieradmin.sxczgkj.cn'
+# VUE_APP_BASE_API  = 'https://pre-cashieradmin.sxczgkj.cn'
 
 # VUE_APP_BASE_API  = 'http://192.168.2.98:8000'
 # 如果接口是 http 形式， wss 需要改为 ws

src/utils/oss-upload.js

@@ -10,6 +10,8 @@ const $config = {
     accessKeySecret: "",
     bucket: "cashier-oss"
 }
+import { Notification } from 'element-ui'
+
 async function uploadAndDownloadFile(name, file, headers) {
     return new Promise((resolve, reject) => {
         try {
@@ -39,16 +41,16 @@ class ossClient {
             refreshSTSTokenInterval: 3600 * 1000
         });
     }
-    async upload(name, file,  progressCallback) {
+    async upload(name, file, progressCallback) {
         try {
             let options = {
                 // 获取分片上传进度、断点和返回值。
                 progress: progressCallback,
-                headers:$headers
+                headers: $headers
             }
             const {
                 res: resp
-            } = await this.ossClient.put(name, file,options).catch(error => {
+            } = await this.ossClient.put(name, file, options).catch(error => {
                 reject(error);
             })
             return resp.requestUrls
@@ -81,10 +83,21 @@ class ossClient {
                 res: resp
             } = await this.ossClient.multipartUpload(name ? name : file.name, file, options)
             // return resp.requestUrls
+            console.log('------resp---');
             console.log(resp)
             return `${resp.requestUrls[0]}`.split('?')[0]
         } catch (e) {
+            console.log('------e---');
             console.log(e);
+            if (e.name == 'cancel') {
+                Notification.error({
+                    title: '上传已取消',
+                    duration: 3000
+                })
+                return e
+
+            }
+
         }
     }
 
@@ -94,8 +107,15 @@ class ossClient {
      * @param {Object} uploadId
      * @param {Object} name
      */
-    abortUpload(uploadId, name) {
+    async abortUpload(uploadId, name) {
-        this.client.abortMultipartUpload(name, uploadId)
+        try {
+         const res=await this.ossClient.abortMultipartUpload(name, uploadId)
+         return res
+        } catch (error) {
+            console.log(error)
+            return error
+        }
+
     }
 
 

src/views/product/group/index.vue

@@ -40,7 +40,7 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+    <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size" @size-change="sizeChange"
       @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
   </div>
 </template>
@@ -76,6 +76,10 @@ export default {
 
   },
   methods: {
+    sizeChange(e){
+      this.tableData.size = e
+      this.getTableData()
+    },
     saleEndTimeFilter: (a, b) => {
 
       var currentDate = new Date(); // 当前日期对象

src/views/system/version/components/add-version.vue

@@ -4,11 +4,9 @@
     width="500px"
     :visible.sync="dialogVisible"
     @close="diaClose"
-    :close-on-click-modal="false"
+    :close-on-click-modal="true"
   >
-    <div class="progress" v-if="loading">
+   
-      <el-progress type="circle" :percentage="progress"></el-progress>
-    </div>
     <el-form
       :element-loading-text="loadingText"
       element-loading-spinner="el-icon-loading"
@@ -18,6 +16,9 @@
       label-width="120px"
       label-position="left"
     >
+    <div class="progress" v-if="loading">
+      <el-progress type="circle" :percentage="progress"></el-progress>
+    </div>
       <el-form-item label="平台">
         <el-select
           v-model="form.source"
@@ -133,7 +134,8 @@ export default {
     diaClose() {
       this.$refs.uploadFile.clearFiles();
       this.restForm();
-      cancelToken();
+      // cancelToken();
+      this.ossClient.abortUpload()
     },
     uploadSuccess(res) {
       this.form.img = res[0];
@@ -152,7 +154,7 @@ export default {
             let fileRes = "";
             const file = this.$refs.uploadFile.getFileList();
             console.log(file);
-            if (!this.hasUpload && file && file.status != "finished") {
+            if (Object.prototype.toString.call(file)=== '[object File]') {
               this.loadingText = "文件上传中，请耐心等待...";
               this.loading = true;
               // fileRes = await $uploadVersionFile(file, { name: version });
@@ -161,13 +163,13 @@ export default {
                 file,
                 (p) => {
                   this.progress = Math.floor(p * 100);
-                  console.log("Progress: " + p * 100 + "%");
                   // 这里可以根据进度做相应的处理，例如更新UI等
                 }
               );
               console.log(fileRes);
               if (!fileRes) {
                 this.loading = false;
+                 this.progress = 0;
                 this.$notify({
                   title: "失败",
                   message: `上传阿里云失败`,
@@ -175,9 +177,11 @@ export default {
                 });
                 return;
               }
+              if(fileRes.name=='cancel'){
+                return
+              }
             }
 
-            this.progress = 0;
             let res = "";
             if (this.form.id) {
               //编辑
@@ -206,7 +210,7 @@ export default {
               });
             }
             this.loading = false;
-
+            this.progress = 0;
             this.close();
 
             this.$emit("success", res);