增加阿里云切片上传，版本管理文件上传切换为阿里云上传，增加上传进度条

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
+    "ali-oss": "^6.21.0",
     "axios": "^0.21.1",
     "clipboard": "2.0.4",
     "codemirror": "^5.49.2",

src/api/version.js

@@ -35,4 +35,18 @@ export function $uploadVersionFile(file, par) {
         data
     });
 }
+/**
+ * 修改当前选中 版本
+ * @returns
+ */
+export function $getCredentials(data) {
+    return request({
+        url: 'api/qiNiuContent/getCredentials',
+        method: "get",
+        data: {
+            shopId: localStorage.getItem("shopId"),
+            ...data
+        }
+    });
+}
 

src/utils/oss-upload.js

@@ -0,0 +1,103 @@
+import OSS from "ali-oss";
+import { $getCredentials } from "@/api/version";
+
+const $headers = {
+    "Access-Control-Allow-Origin": "*"
+};
+const $config = {
+    region: "oss-cn-beijing",
+    accessKeyId: "",
+    accessKeySecret: "",
+    bucket: "cashier-oss"
+}
+async function uploadAndDownloadFile(name, file, headers) {
+    return new Promise((resolve, reject) => {
+        try {
+            ossClient.put(name, file, { ...$headers, ...headers }).then((res) => {
+                console.log(res);
+                resolve(res);
+            });
+        } catch (error) {
+            console.error(error)
+            reject(error);
+        }
+    });
+}
+class ossClient {
+    constructor(config) {
+        this.ossClient = new OSS({
+            ...$config, ...config, refreshSTSToken: async () => {
+                // 向您搭建的STS服务获取临时访问凭证。
+                const res = await $getCredentials()
+                return {
+                    accessKeyId: res.accessKeyId, // 自己账户的accessKeyId或临时秘钥
+                    accessKeySecret: res.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
+                    stsToken: res.securityToken, //  从STS服务获取的安全令牌（SecurityToken）。
+                }
+            },
+            // 刷新临时访问凭证的时间间隔，单位为毫秒。
+            refreshSTSTokenInterval: 3600 * 1000
+        });
+    }
+    async upload(name, file,  progressCallback) {
+        try {
+            let options = {
+                // 获取分片上传进度、断点和返回值。
+                progress: progressCallback,
+                headers:$headers
+            }
+            const {
+                res: resp
+            } = await this.ossClient.put(name, file,options).catch(error => {
+                reject(error);
+            })
+            return resp.requestUrls
+
+        } catch (error) {
+            console.log(error)
+            reject(error);
+        }
+    }
+    /**
+     * 分片上传
+     * @param {Object} client oss客户端
+     * @param {Object} file 上传的文件
+     * @param {Object} dir 上传oss的文件夹 
+     * @param {Object} progressCallback 分片进度回调
+     */
+    async partUpload(name, file, progressCallback) {
+        try {
+            let options = {
+                // 获取分片上传进度、断点和返回值。
+                progress: progressCallback,
+
+                // 设置并发上传的分片数量。
+                parallel: 8,
+                // 设置分片大小。默认值为1 MB，最小值为100 KB。
+                partSize: 100 * 1024,
+                mime: file.type
+            }
+            const {
+                res: resp
+            } = await this.ossClient.multipartUpload(name ? name : file.name, file, options)
+            // return resp.requestUrls
+            console.log(resp)
+            return `${resp.requestUrls[0]}`.split('?')[0]
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
+    /**
+     * 结束上传并删除碎片
+     * @param {Object} client
+     * @param {Object} uploadId
+     * @param {Object} name
+     */
+    abortUpload(uploadId, name) {
+        this.client.abortMultipartUpload(name, uploadId)
+    }
+
+
+}
+export default ossClient;

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

@@ -4,9 +4,12 @@
     width="500px"
     :visible.sync="dialogVisible"
     @close="diaClose"
+    :close-on-click-modal="false"
   >
+    <div class="progress" v-if="loading">
+      <el-progress type="circle" :percentage="progress"></el-progress>
+    </div>
     <el-form
-      v-loading="loading"
       :element-loading-text="loadingText"
       element-loading-spinner="el-icon-loading"
       ref="form"
@@ -40,13 +43,23 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label="更新提示内容" prop="message">
-        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="form.message"></el-input>
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 6 }"
+          v-model="form.message"
+        ></el-input>
       </el-form-item>
 
       <el-form-item label="版本文件">
-        <uploadFile ref="uploadFile" @success="changeHasUpload" :limit="1" @remove="uploadRemove" />
+        <uploadFile
+          ref="uploadFile"
+          @success="changeHasUpload"
+          :limit="1"
+          @remove="uploadRemove"
+        />
         <div class="tips"></div>
       </el-form-item>
+
       <div class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
@@ -57,9 +70,9 @@
   
   <script>
 import uploadFile from "./upload-file";
-import { $uploadVersionFile, $version } from "@/api/version";
+import { $uploadVersionFile, $version, $getCredentials } from "@/api/version";
-import { cancelToken, clearAllToken } from '@/utils/globalCancelToken.js'
+import { cancelToken, clearAllToken } from "@/utils/globalCancelToken.js";
-
+import OSS from "@/utils/oss-upload.js";
 const form = {
   source: "PC",
   version: "",
@@ -73,8 +86,10 @@ export default {
   },
   data() {
     return {
+      progress: 0,
+      ossClient: undefined,
       loading: false,
-      loadingText:'',
+      loadingText: "",
       sources: [
         { label: "PC", value: "PC" },
         { label: "APP", value: "APP" },
@@ -92,26 +107,33 @@ export default {
       },
       form: { ...form },
       //文件是否已经上传过
-      hasUpload:true
+      hasUpload: true,
     };
   },
-  mounted() {},
+  mounted() {
+    this.getCredentials();
+  },
   methods: {
-    changeHasUpload(){
+    async getCredentials() {
-      this.hasUpload=false
+      const res = await $getCredentials();
+      this.ossClient = new OSS({ ...res, stsToken: res.securityToken });
+      console.log(this.ossClient);
+    },
+    changeHasUpload() {
+      this.hasUpload = false;
     },
     restForm() {
       console.log("restForm");
       console.log(form);
       this.form = { ...form };
-      this.loadingText=''
+      this.loadingText = "";
-      this.loading=false
+      this.loading = false;
+      this.progress = 0;
     },
     diaClose() {
       this.$refs.uploadFile.clearFiles();
       this.restForm();
-      cancelToken()
+      cancelToken();
-
     },
     uploadSuccess(res) {
       this.form.img = res[0];
@@ -127,37 +149,64 @@ export default {
         if (valid) {
           try {
             const { version } = this.form;
-            let fileRes=''
+            let fileRes = "";
             const file = this.$refs.uploadFile.getFileList();
             console.log(file);
-            if(!this.hasUpload&&file&&file.status!='finished'){
+            if (!this.hasUpload && file && file.status != "finished") {
-              this.loadingText='文件上传中，请耐心等待...'
+              this.loadingText = "文件上传中，请耐心等待...";
               this.loading = true;
-               fileRes = await $uploadVersionFile(file, { name:version });
+              // fileRes = await $uploadVersionFile(file, { name: version });
-              this.loading = false;
+              fileRes = await this.ossClient.partUpload(
+                `/version/${version}.exe`,
+                file,
+                (p) => {
+                  this.progress = Math.floor(p * 100);
+                  console.log("Progress: " + p * 100 + "%");
+                  // 这里可以根据进度做相应的处理，例如更新UI等
                 }
+              );
+              console.log(fileRes);
+              if (!fileRes) {
+                this.loading = false;
+                this.$notify({
+                  title: "失败",
+                  message: `上传阿里云失败`,
+                  type: "error",
+                });
+                return;
+              }
+            }
+
+            this.progress = 0;
             let res = "";
             if (this.form.id) {
               //编辑
-              res = await $version.update({...this.form,url:fileRes?fileRes.data:this.form.url});
+              res = await $version.update({
+                ...this.form,
+                url: fileRes ? fileRes : this.form.url,
+              });
               this.$notify({
                 title: "成功",
                 message: `修改成功`,
                 type: "success",
               });
-
             } else {
               //添加
               if (file) {
                 console.log(1);
               }
-              res = await $version.add({...this.form,url:fileRes?fileRes.data:this.form.url});
+              res = await $version.add({
+                ...this.form,
+                url: fileRes ? fileRes : this.form.url,
+              });
               this.$notify({
                 title: "成功",
                 message: `添加成功`,
                 type: "success",
               });
             }
+            this.loading = false;
+
             this.close();
 
             this.$emit("success", res);
@@ -178,13 +227,18 @@ export default {
         this.form = {
           ...obj,
         };
-        requestAnimationFrame(()=>{
+        requestAnimationFrame(() => {
-            this.$refs.uploadFile.fileList = [{
+          if(obj.url){
+            this.$refs.uploadFile.fileList = [
+            {
               url: obj.url,
               name: obj.url,
-              status: 'finished',
+              status: "finished",
-            }]
+            },
-          })
+          ];
+          }
+      
+        });
       }
     },
     close() {
@@ -196,11 +250,11 @@ export default {
 </script>
   
   <style scoped lang="scss">
-  .dialog-footer{
+.dialog-footer {
   display: flex;
   margin-top: 30px;
   justify-content: right;
-  }
+}
 .goods_info {
   background-color: #f9f9f9;
   padding: 10px;
@@ -212,5 +266,17 @@ export default {
     padding-left: 10px;
   }
 }
+.progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: rgba(255, 255, 255, 0.9);
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
   

src/views/system/version/components/oss-config.js

@@ -0,0 +1,6 @@
+export default {
+    region: "oss-cn-beijing",
+    accessKeyId: "",
+    accessKeySecret: "",
+    bucket: "cashier-oss"
+  }

src/views/system/version/components/upload-file.vue

@@ -98,7 +98,18 @@ export default {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
     },
-    onExceed() {
+    onExceed(files ) {
+      console.log(files);
+      if(this.limit == 1&&this.fileList.length>0){
+        this.fileList.splice(0,1)
+        this.fileList.push(files[0])
+        //  this.$set(this.fileList,0,files[0]) 
+      //  this.fileList.push({
+      //     url: response.data[0],
+      //     id: response.data.id,
+      //   });
+        return
+      }
       this.$notify.error({
         title: "错误",
         message: `最多上传${this.limit}个文件`,

src/views/system/version/index.vue

@@ -72,7 +72,7 @@
 
         <el-table-column label="下载地址" prop="url">
           <template v-slot="scope">
-            <a class="a" :href="scope.row.url">{{ scope.row.url }}</a>
+            <a class="a" :href="scope.row.url" target="_blank">{{ scope.row.url }}</a>
           </template>
         </el-table-column>