src/components/FileUpload/optimizeUpload.vue

@@ -1,364 +1,140 @@
 <template>
-<div>
+  <div>
-  <div class="container">
+    <el-upload class="upload-demo" ref="upload" action="#"
-    <div class="item">
+               :before-upload="beforeUpload"
-      <el-upload  action="#"
+               :on-change="onChange"
-                  ref="uploadFolder"
+               :on-remove="handleRemove"
-                  :on-change="onChange"
+               :multiple="isMultiple"
-                  :on-remove="handleRemove"
+               :on-exceed="handleExceed"
-                  :show-file-list="false"
+               :accept="acceptType"
-                  :headers="headers"
+               :limit="limit"
-                  :accept="accept"
+               :file-list="fileList"
-                  :file-list="fileList"
+               :auto-upload="true"
-                  :before-upload="beforeUploadsg"
+               :http-request="uploadFile"
-                  :on-success="uploadSuccess"
+               show-file-list>
-                  :on-error="uploadError"
+      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-                  :on-exceed="exceed"
+      <el-button size="small" type="primary" @click="handleUploadFile">
-                  :auto-upload="true"
+        上传文件夹
-                  :http-request="uploadFile"
+      </el-button>
-                  :multiple="true">
+      <!--    上传-->
-        <el-button slot="trigger" id="myButton"  size="small" type="primary" @click="uploadBtn.click()">选取文件夹</el-button>
+      <input v-show="false" ref="fileRef" id="fileFolder" type="file" @change="handleFolderUpload" webkitdirectory
-      </el-upload>
+             multiple="multiple" />
-    </div>
+
-    <div></div>
+<!--      <input v-show="false" type="file" ref="fileRef" webkitdirectory @change="handleFolderUpload">
-    <div class="item">
+      <el-button slot="trigger" size="small" type="primary">选取文件夹</el-button>-->
-      <el-upload class="upload-demo" ref="upload" action="#"
+    </el-upload>
-                 :before-upload="beforeUpload"
+    <div slot="tip" class="el-upload__tip">只能上传{{acceptType}}文件</div>
-                 :on-change="onChange"
+    <div v-show="progressFlag" class="head-img">
-                 :on-remove="handleRemove"
+      <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
-                 :multiple="isMultiple"
-                 :on-exceed="handleExceed"
-                 :accept="acceptType"
-                 :limit="limit"
-                 :file-list="fileList"
-                 :auto-upload="true"
-                 :http-request="uploadFile"
-                 show-file-list>
-        <el-button id="myButton" slot="trigger" size="small" type="primary">选取文件</el-button>
-        <div slot="tip" class="el-upload__tip">只能上传{{acceptType}}文件</div>
-      </el-upload>
-      <div v-show="progressFlag" class="head-img">
-        <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
-      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 import axios from 'axios'
-import sgUploadTray from "./sgUploadTray"
 import {
-    getToken
+  getToken
 } from "@/utils/auth";
+import JSZip from 'jszip'
 
 export default {
-
+  props: {
-  components: {
+    uploadUrl: {
-    sgUploadTray,
+      type: String,
-  },
+      required: true
-    props: {
-        uploadUrl: {
-            type: String,
-            required: true
-        },
-      // 是否多选
-        isMultiple: {
-          type: Boolean,
-          default() {
-            return false
-          }
-        },
-      // 文件类型
-      type: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      //上传类型
-      acceptType: {
-        type: String,
-        required: true
-      },
-      // 上传数量
-      limit: {
-        type: Number,
-        default() {
-          return 1
-        }
-      },
-      // 文件
-      dataFile: {
-        type: [Object, Array, String],
-        default() {
-          return ''
-        }
-      },
     },
-    data() {
+    // 是否多选
-        return {
+    isMultiple: {
-            fileList: [],
+      type: Boolean,
-            progress: 0,
+      default() {
-            isUploading: false,
+        return false
-            progressFlag: false, //进度条初始值隐藏
-            progressPercent: 0, //进度条初始值
-            partSize: 5 * 1024 * 1024,
-            headers: { kkToken: localStorage.token, }, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
-            accept:`.${["png", "jpg", "jpeg", "bmp", "gif"].join(",.")}`,//允许上传的后缀名
-            actionURL: process.env.VUE_APP_BASE_API + "/common/initUpload",
-            dur: 100,
-            percent: 100,
-            uploadBtn: null,//上传按钮
-            uploadList: [],
-            showUploadTray: false,
-        };
-    },
-    mounted(d) {
-      this.$nextTick(() => {
-        this.uploadBtn = this.$refs.uploadFolder.$children[0].$refs.input;
-        this.uploadBtn.webkitdirectory = true;//让el-upload支持上传文件夹
-      })
-    },
-    watch: {
-      dataFile: {
-        handler(newValue, oldValue) {
-          if (newValue) {
-            this.fileList = Array.isArray(newValue) ? newValue : [newValue]
-          } else {
-            this.fileList = []
-          }
-        },
-        immediate: true
       }
     },
-    methods: {
+    // 文件类型
-      showFakeLoading(file) {
+    type: {
-        file = this.uploadList.find(v => v.uid == file.uid);
+      type: Array,
-        clearInterval(file.interval);
+      default() {
-        file.percent = 0;
+        return []
-        file.interval = setInterval(() => {
+      }
-          file.percent++;
+    },
-          file.percent >= 99 && this.hideFakeLoading(file);
+    //上传类型
-        }, this.dur);
+    acceptType: {
-      },
+      type: String,
-      hideFakeLoading(file, { type, tip, color } = {}) {
+      required: true
-        console.log('file======>');
+    },
-        console.log(file)
+    // 上传数量
-        file = this.uploadList.find(v => v.uid == file.uid);
+    limit: {
-        clearInterval(file.interval);
+      type: Number,
-        switch (type) {
+      default() {
-          case 'error':
+        return 1
-            file.percent = 0;
+      }
-            break;
+    },
-          case 'success':
+    // 文件
-          default:
+    dataFile: {
-            file.percent = 100;
+      type: [Object, Array, String],
-        }
+      default() {
-        type && (file.type = type);
+        return ''
-        tip && (file.tip = tip);
+      }
-        color && (file.color = color);
+    },
-      },
+  },
-      exceed(file, fileList) {
+  data() {
-        this.$message.error("上传文件数量太大，分散上传吧！");
+    return {
-      },
+      fileList: [],
-      stopUpload(d) {
+      progress: 0,
-        this.$refs.uploadFolder.abort();
+      isUploading: false,
-        //console.log(`取消上传`, d);
+      progressFlag: false, //进度条初始值隐藏
-      },
+      progressPercent: 0, //进度条初始值
-      beforeUploadsg(file, id) {
+      partSize: 5 * 1024 * 1024,
-        console.log(this.uploadList)
+    };
-        this.uploadList = []
+  },
-        console.info("this.uploadList==", JSON.stringify(this.uploadList))
+  watch: {
-        this.uploadList.unshift({
+    dataFile: {
-          interval: false,
+      handler(newValue, oldValue) {
-          uid: file.uid,
+        if (newValue) {
-          percent: 0,//加载进度
+          this.fileList = Array.isArray(newValue) ? newValue : [newValue]
-          name: file.name,
-          size: file.size,
-          type: file.type,
-          webkitRelativePath: file.webkitRelativePath,
-          tip: '',
-          color: '',
-        });
-        this.showUploadTray = true;
-        this.accept = ["png", "jpg", "jpeg", "bmp", "gif", "txt", "json", "pdf"]
-        // 判断是不是特定的格式________________________
-        let isFile = this.accept.includes(file.name.toLocaleLowerCase().split(".").pop());
-        const maxSize = 50; //限制大小
-        const isAllowSize = file.size / 1024 / 1024 <= maxSize;
-        isFile || this.$message.error("上传文件只能是" + this.accept+ "格式");
-        isAllowSize || this.$message.error("上传文件大小不能超过" + maxSize + "MB");
-        let allowUpload = isFile && isAllowSize;
-        return allowUpload; //若返回false则停止上传
-      },
-
-      uploadSuccess(response, file, fileList) {
-        if (response.data && response.data.key) {
-          // 下载失败原因的描述文件
-          this.$d.customer_downloadImportCustomerExcel({ key: response.data.key }, {
-            s: (d) => {
-              this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
-              this.$g.downloadFile(d, `${file.name}-上传失败原因`, '.xls');
-              this.$message.error(`${file.name}-上传失败，请查看失败原因`);
-              // this.initList();//刷新列表
-              //console.log('上传失败', response, file, fileList);
-            }
-          });
-        } else if (response.success) {
-          // 上传成功了
-          this.hideFakeLoading(file, { type: 'success', tip: "上传成功", color: "green" });
-          this.$message.success(`“${file.name}上传成功`);
-          // this.initList();//刷新列表
-          //console.log('上传成功', response, file, fileList);
         } else {
-          // 其他失败原因
+          this.fileList = []
-          this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
-          this.$message.error(response.msg);
-          //console.log('上传失败', response, file, fileList);
         }
       },
-      //上传失败
+      immediate: true
-      uploadError(err, file, fileList) {
+    }
-        this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
+  },
-        this.$message.error("上传失败");
+  methods: {
-        //console.log('上传失败', err, file, fileList);
+    // 上传前
-      },
+    beforeUpload(file) {
-
+      /* const fileType = file.type.toLowerCase()
-      // 上传前
+       console.info("fileType=======", fileType)
-      beforeUpload(file) {
+       const typeFlag = this.type.some(item => {
-       /* const fileType = file.type.toLowerCase()
+         return fileType.indexOf(item) != -1
-        console.info("fileType=======", fileType)
+       })
-        const typeFlag = this.type.some(item => {
+       if (!typeFlag) {
-          return fileType.indexOf(item) != -1
+         this.$message.error('上传类型有误，请重新上传')
-        })
+         return false
-        if (!typeFlag) {
+       }*/
-          this.$message.error('上传类型有误，请重新上传')
+    },
-          return false
+    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
-        }*/
+    onChange(file, fileList) {
-      },
+      this.fileList = fileList;
-        //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+    },
-        onChange(file, fileList) {
+    handleRemove(file, fileList) {
-            this.fileList = fileList;
+      this.fileList = fileList;
-        },
+    },
-        handleRemove(file, fileList) {
+    handleExceed(files, fileList) {
-            this.fileList = fileList;
+      this.$message.warning(
-        },
+        "最多之能上传"+ this.limit +"个附件"
-        handleExceed(files, fileList) {
+      );
-            this.$message.warning(
+    },
-                "最多之能上传"+ this.limit +"个附件"
+    async uploadFile({ data, file }) {
-            );
+      let self = this
-        },
+      //初始化参数
-      async uploadFile({ data, file }) {
+      if (file.size < this.partSize) {
-        let self = this
+        let formData = new FormData()
-        //初始化参数
+        formData.append("file", file)
-        this.progress++
-        if (file.size < this.partSize) {
-          let formData = new FormData()
-          formData.append("file", file)
-          self.progressFlag = true;
-          axios({
-            url: self.uploadUrl,
-            method: 'post',
-            data: formData,
-            headers: {
-              'Authorization': 'Bearer ' + getToken(),
-              'Content-Type': 'multipart/form-data'
-            },
-            onUploadProgress: progressEvent => {
-              // progressEvent.loaded:已上传文件大小
-              // progressEvent.total:被上传文件的总大小
-              //进度条
-              self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
-            }
-          }).then(res => {
-            setTimeout(() => {
-              if (res.data.code == 200 && self.progressPercent === 100) {
-                setTimeout(function () {
-                  self.$message({
-                    message: '上传成功！',
-                    type: 'success',
-                    duration: '2000'
-                  });
-                  self.progressFlag = false;
-                  self.progressPercent = 0
-                  self.handleResult(res,file);
-                }, 500);
-              } else {
-                self.$message({
-                  message: '上传失败！',
-                  type: 'error',
-                  duration: '2000'
-                });
-              }
-            }, 1000);
-
-          }).catch(error => {
-            console.error(error)
-            self.progressFlag = false;
-            self.progressPercent = 0
-            self.$refs.upload.clearFiles();
-            self.$message({
-              message: '上传失败！',
-              type: 'error',
-              duration: '2000'
-            });
-          })
-        } else {
-          file._shardCount = Math.ceil(file.size / this.partSize) //总片数
-          file.uploaded = 0
-          let formData = new FormData()
-          formData.append('fileName', file.name)
-          let self = this
-
-          //大文件上传初始化,返回uploadId  initUpload(formData)
-          axios({
-            url: process.env.VUE_APP_BASE_API + "/common/initUpload",
-            method: 'post',
-            data: formData,
-            headers: {
-              'Authorization': 'Bearer ' + getToken(),
-              'Content-Type': 'multipart/form-data'
-            },
-          }).then(function (res) {
-            if (res.status == 200) {
-              //从第0块开始上传
-              file.uploadId = res.data.uploadId
-              file.objectKey = res.data
-              file.chunkId = 0
-              self.uploadByChunk(file)
-            } else {
-              this.progress--
-              self.$message.error(res.msg)
-            }
-          }).catch(error => {
-            self.progressPercent = 0
-            self.progressFlag = false;
-            console.error(error)
-          })
-        }
-
-      },
-      //分片上传大文件
-      uploadByChunk(file) {
-        this._start = file.chunkId * this.partSize
-        this._end = Math.min(file.size, this._start + this.partSize)//结束时总大小，和 开始的大小+之前的大小比较
-        let self = this
-        let fileData = file.slice(this._start, this._end)
-        //获取文件块MD5
-        let reader = new FileReader()
-        reader.readAsBinaryString(fileData)
-        let form1 = new FormData()//new一个form的实例，可以进行键值对的添加，
-        form1.append('chunkFile', fileData) //slice方法用于切出文件的一部分
-        form1.append('uploadId', file.uploadId)
-        form1.append('chunkId', (file.chunkId + 1).toString())
-        form1.append('shardCount', file._shardCount.toString()) //是否最后一片
         self.progressFlag = true;
-        //上传大文件的Chunk 返回chunk的MD5 uploadChunk(form1)
         axios({
-          url: process.env.VUE_APP_BASE_API + "/common/uploadChunk",
+          url: self.uploadUrl,
           method: 'post',
-          data: form1,
+          data: formData,
           headers: {
             'Authorization': 'Bearer ' + getToken(),
             'Content-Type': 'multipart/form-data'
@@ -369,53 +145,9 @@ export default {
             //进度条
             self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
           }
-        }).then(response => {
+        }).then(res => {
-          if (response.status == 200) {
+          setTimeout(() => {
-            //判断返回的MD5值是否一致，一致继续传下一块，否则重传本块（这里目前前后端MD5一直不一致，暂时先注释掉，有时间了我再研究一下）
+            if (res.data.code == 200 && self.progressPercent === 100) {
-            // self.md5Str[index] === response.msg ||
-            if (true) {
-              // this.$message.success('第' + (index + 1).toString() + '块文件上传成功')
-              file.uploaded++
-              self.percentageSend(file)
-              //如果没上传完成，继续上传一下块
-              file.chunkId++
-              if (file.chunkId < file._shardCount) {
-                this.uploadByChunk(file)
-              }
-            } else {
-              //不一致，重新传本块
-              this.$message.success('第' + (file.chunkId + 1).toString() + '块文件上传不成功，重新上传')
-              this.uploadByChunk(file.chunkId)
-            }
-          } else {
-            //出错，跳出循环显示错误
-            this.progress--
-            this.$message.error(response.msg)
-          }
-        })
-      },
-      //接收上传的百分值回调
-      percentageSend(file) {
-        let self = this
-        let perNum = Math.floor((file.uploaded / file._shardCount) * 100)
-        this.progressPercent = perNum
-        //如果上传完成，合并文件
-        if (perNum === 100) {
-          let form2 = new FormData()//new一个form的实例，可以进行键值对的添加，
-          form2.append('uploadId', file.uploadId)
-          form2.append('fileName', file.name)
-          // 大文件上传完成后合并
-          // 返回文件访问的URL
-          axios({
-            url: process.env.VUE_APP_BASE_API + "/common/mergeFile",
-            method: 'post',
-            data: form2,
-            headers: {
-              'Authorization': 'Bearer ' + getToken(),
-              'Content-Type': 'multipart/form-data'
-            },
-          }).then(res => {
-            if (res.status == 200) {
               setTimeout(function () {
                 self.$message({
                   message: '上传成功！',
@@ -433,39 +165,300 @@ export default {
                 duration: '2000'
               });
             }
-          })
+          }, 1000);
-        }
+
-      },
+        }).catch(error => {
-      resetData() {
+          console.error(error)
-        this.progress = 0;
+          self.progressFlag = false;
-      },
+          self.progressPercent = 0
-      handleResult(res, file) {
+          self.$refs.upload.clearFiles();
+          self.$message({
+            message: '上传失败！',
+            type: 'error',
+            duration: '2000'
+          });
+        })
+      } else {
+        file._shardCount = Math.ceil(file.size / this.partSize) //总片数
+        file.uploaded = 0
+        let formData = new FormData()
+        formData.append('fileName', file.name)
         let self = this
-        const data = {
+        //大文件上传初始化,返回uploadId  initUpload(formData)
-          fileName: file.name,
+        axios({
-          fileSize: file.size,
+          url: process.env.VUE_APP_BASE_API + "/common/initUpload",
-          fileUrl: res.data.url,
+          method: 'post',
-          filePath: res.data.filePath,
+          data: formData,
-          fileOldName: res.data.originalFilename,
+          headers: {
-          fileNewName: res.data.newFileName,
+            'Authorization': 'Bearer ' + getToken(),
-          suffixType: res.data.suffixType
+            'Content-Type': 'multipart/form-data'
-        }
+          },
-        self.$emit("handleSuccess", data)
+        }).then(function (res) {
-      },
+          if (res.status == 200) {
-      /** 清空文件 **/
+            //从第0块开始上传
-      clearFile(){
+            file.uploadId = res.data.uploadId
-        this.$refs.upload.clearFiles();
+            file.objectKey = res.data
-        this.fileList = []
+            file.chunkId = 0
+            self.uploadByChunk(file)
+          } else {
+            this.progress--
+            self.$message.error(res.msg)
+          }
+        }).catch(error => {
+          self.progressPercent = 0
+          self.progressFlag = false;
+          console.error(error)
+        })
       }
-    }
+
+    },
+    //分片上传大文件
+    uploadByChunk(file) {
+      this._start = file.chunkId * this.partSize
+      this._end = Math.min(file.size, this._start + this.partSize)//结束时总大小，和 开始的大小+之前的大小比较
+
+      let self = this
+      let fileData = file.slice(this._start, this._end)
+      //获取文件块MD5
+      let reader = new FileReader()
+      reader.readAsBinaryString(fileData)
+      let form1 = new FormData()//new一个form的实例，可以进行键值对的添加，
+      form1.append('chunkFile', fileData) //slice方法用于切出文件的一部分
+      form1.append('uploadId', file.uploadId)
+      form1.append('chunkId', (file.chunkId + 1).toString())
+      form1.append('shardCount', file._shardCount.toString()) //是否最后一片
+      self.progressFlag = true;
+      //上传大文件的Chunk 返回chunk的MD5 uploadChunk(form1)
+      axios({
+        url: process.env.VUE_APP_BASE_API + "/common/uploadChunk",
+        method: 'post',
+        data: form1,
+        headers: {
+          'Authorization': 'Bearer ' + getToken(),
+          'Content-Type': 'multipart/form-data'
+        },
+        onUploadProgress: progressEvent => {
+          // progressEvent.loaded:已上传文件大小
+          // progressEvent.total:被上传文件的总大小
+          //进度条
+          self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+        }
+      }).then(response => {
+        if (response.status == 200) {
+          //判断返回的MD5值是否一致，一致继续传下一块，否则重传本块（这里目前前后端MD5一直不一致，暂时先注释掉，有时间了我再研究一下）
+          // self.md5Str[index] === response.msg ||
+          if (true) {
+            // this.$message.success('第' + (index + 1).toString() + '块文件上传成功')
+            file.uploaded++
+            self.percentageSend(file)
+            //如果没上传完成，继续上传一下块
+            file.chunkId++
+            if (file.chunkId < file._shardCount) {
+              this.uploadByChunk(file)
+            }
+          } else {
+            //不一致，重新传本块
+            this.$message.success('第' + (file.chunkId + 1).toString() + '块文件上传不成功，重新上传')
+            this.uploadByChunk(file.chunkId)
+          }
+        } else {
+          //出错，跳出循环显示错误
+          this.progress--
+          this.$message.error(response.msg)
+        }
+      })
+    },
+    //接收上传的百分值回调
+    percentageSend(file) {
+      let self = this
+      let perNum = Math.floor((file.uploaded / file._shardCount) * 100)
+      this.progressPercent = perNum
+      //如果上传完成，合并文件
+      if (perNum === 100) {
+        let form2 = new FormData()//new一个form的实例，可以进行键值对的添加，
+        form2.append('uploadId', file.uploadId)
+        form2.append('fileName', file.name)
+        // 大文件上传完成后合并
+        // 返回文件访问的URL
+        axios({
+          url: process.env.VUE_APP_BASE_API + "/common/mergeFile",
+          method: 'post',
+          data: form2,
+          headers: {
+            'Authorization': 'Bearer ' + getToken(),
+            'Content-Type': 'multipart/form-data'
+          },
+        }).then(res => {
+          if (res.status == 200) {
+            setTimeout(function () {
+              self.$message({
+                message: '上传成功！',
+                type: 'success',
+                duration: '2000'
+              });
+              self.progressFlag = false;
+              self.progressPercent = 0
+              self.handleResult(res,file);
+            }, 500);
+          } else {
+            self.$message({
+              message: '上传失败！',
+              type: 'error',
+              duration: '2000'
+            });
+          }
+        })
+      }
+    },
+    resetData() {
+      this.progress = 0;
+    },
+    handleResult(res, file) {
+      let self = this
+      const data = {
+        fileName: file.name,
+        fileSize: file.size,
+        fileUrl: res.data.url,
+        filePath: res.data.filePath,
+        fileOldName: res.data.originalFilename,
+        fileNewName: res.data.newFileName,
+        suffixType: res.data.suffixType
+      }
+      console.info("data===========", data)
+      self.$emit("handleSuccess", data)
+    },
+    /** 清空文件 **/
+    clearFile(){
+      this.$refs.upload.clearFiles();
+      this.fileList = []
+    },
+    handleUploadFile() {
+      document.getElementById("fileFolder").value = null;
+      this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
+    },
+    async handleFolderUpload(event) {
+      let self = this;
+      const files = event.target.files;
+      this.fileslength = files.length;
+
+      // 获取文件夹名称
+      let folderName = "";
+      if (files.length > 0) {
+        let relativePath = files[0].webkitRelativePath;
+        folderName = relativePath.split("/")[0];
+      }
+
+      const zip = new JSZip();
+
+      // 将文件夹及其内容添加到 ZIP 中
+      Array.from(files).forEach(file => {
+        zip.file(file.webkitRelativePath, file);
+      });
+
+      // 生成 ZIP 文件
+      const zipBlob = await zip.generateAsync({ type: "blob" });
+
+      // 创建 FormData 对象
+     /* const formData = new FormData();
+      formData.append("file", zipBlob, folderName + ".zip");*/
+      let formData = new FormData()
+      formData.append('fileName', folderName + ".zip")
+
+      // 计算 shardCount
+      const _shardCount = Math.ceil(zipBlob.size / this.partSize);
+      const fileObj = {
+        _shardCount,
+        size: zipBlob.size,
+        file: zipBlob              // 将 zipBlob 添加到 fileObj 中
+      };
+      self.$set(fileObj.file, '_shardCount', _shardCount);
+      self.$set(fileObj.file, 'uploaded', 0);
+      self.$set(fileObj.file, 'name', folderName + ".zip");
+      self.fileList.push(fileObj.file)
+
+      if (zipBlob.size < this.partSize) {
+        let formDataSign = new FormData()
+        formDataSign.append("file", zipBlob, folderName + ".zip")
+        self.progressFlag = true;
+        axios({
+          url: self.uploadUrl,
+          method: 'post',
+          data: formDataSign,
+          headers: {
+            'Authorization': 'Bearer ' + getToken(),
+            'Content-Type': 'multipart/form-data'
+          },
+          onUploadProgress: progressEvent => {
+            // progressEvent.loaded:已上传文件大小
+            // progressEvent.total:被上传文件的总大小
+            //进度条
+            self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+          }
+        }).then(res => {
+          setTimeout(() => {
+            if (res.data.code == 200 && self.progressPercent === 100) {
+              setTimeout(function () {
+                self.$message({
+                  message: '上传成功！',
+                  type: 'success',
+                  duration: '2000'
+                });
+                self.progressFlag = false;
+                self.progressPercent = 0
+                self.handleResult(res,fileObj.file);
+              }, 500);
+            } else {
+              self.$message({
+                message: '上传失败！',
+                type: 'error',
+                duration: '2000'
+              });
+            }
+          }, 1000);
+
+        }).catch(error => {
+          console.error(error)
+          self.progressFlag = false;
+          self.progressPercent = 0
+          self.$refs.upload.clearFiles();
+          self.$message({
+            message: '上传失败！',
+            type: 'error',
+            duration: '2000'
+          });
+        })
+      } else {
+        // 初始化上传，获取 uploadId
+        axios({
+          url: process.env.VUE_APP_BASE_API + "/common/initUpload",
+          method: 'post',
+          data: formData,
+          headers: {
+            'Authorization': 'Bearer ' + getToken(),
+            'Content-Type': 'multipart/form-data'
+          },
+        }).then(function (res) {
+          if (res.status === 200) {
+            self.$set(fileObj.file, 'uploadId', res.data.uploadId);
+            self.$set(fileObj.file, 'chunkId', 0);
+            self.$set(fileObj.file, 'objectKey', res.data);
+
+            /*//从第0块开始上传
+            fileObj.uploadId = res.data.uploadId;
+            fileObj.chunkId = 0;
+            fileObj.objectKey = res.data*/
+            self.uploadByChunk(fileObj.file);
+          } else {
+            self.progress--;
+            self.$message.error(res.msg);
+          }
+        }).catch(error => {
+          self.progressPercent = 0;
+          self.progressFlag = false;
+          console.error(error);
+        });
+      }
+    },
+  }
 };
 </script>
-<style>
-#myButton {
-  width: 90px; /* 设置按钮长度为200像素 */
-}
-.container {
-  display: flex; /* 设定为flex布局 */
-}
-</style>
-

src/views/tool/index.vue

@@ -107,6 +107,15 @@
               <dict-tag :options="dict.type.tool_status" :value="scope.row.status"/>
             </template>
           </el-table-column>
+
+          <el-table-column label="关联工具" align="center" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span v-if="handleRelationTool(scope.row.relationToolList)">
+                  <el-link target="_blank" v-for="assItem in scope.row.relationToolList" :key="assItem.id" @click="handleToolDetail(assItem)">{{assItem.toolName}}</el-link>
+              </span>
+            </template>
+          </el-table-column>
+
           <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -362,6 +371,12 @@ export default {
       this.loading = true;
       listTool(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
           this.toolList = response.rows;
+          for(let itemData of this.toolList){
+            this.$set(itemData, "relationToolList", [])
+            if(itemData.association != null && itemData.association != '' && itemData.association != undefined){
+              itemData.relationToolList = JSON.parse(itemData.association)
+            }
+          }
           this.total = response.total;
           this.loading = false;
         }
@@ -575,7 +590,26 @@ export default {
       this.$nextTick(() => {
         this.$refs.downloadFileDetailRef = null; // 清空引用
       });
+    },
+    /** 详情 **/
+    handleToolDetail(row){
+      this.detailDrawerOpen = true
+      this.detailOpen = true
+      let data = {
+        "toolId": row.toolId
+      }
+      this.toolDetail = data
+    },
+    /** association **/
+    handleRelationTool(value){
+      if(value == null || value == '' || value == undefined){
+        return false
+      }
+      if(value.length > 0){
+        return true
+      }
     }
+
   }
 };
 </script>

src/views/tool/toolDetail.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="fbox1">
-    <div class="fl">
+    <div class="fl" v-loading="detailLoading">
       <el-tabs v-model="detailActiveName">
         <el-tab-pane label="基本信息" name="first">
           <div class="el-form-border">
             <el-form ref="form" label-width="150px">
               <el-row>
-                <el-col :span="12"> <el-form-item label="工具名称">{{toolDetail.toolName}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="工具名称">{{detailData.toolName}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="工具类别"><dict-tag :options="dict.type.tool_type" :value="toolDetail.toolType"/></el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="工具类别"><dict-tag :options="dict.type.tool_type" :value="detailData.toolType"/></el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="工具来源"><dict-tag :options="dict.type.tool_source" :value="toolDetail.toolSource"/></el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="工具来源"><dict-tag :options="dict.type.tool_source" :value="detailData.toolSource"/></el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="负责人">{{toolDetail.toolPrincipalsName}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="负责人">{{detailData.toolPrincipalsName}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="归属单位">{{toolDetail.toolRespDeptName}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="归属单位">{{detailData.toolRespDeptName}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="状态"><dict-tag :options="dict.type.tool_status" :value="toolDetail.status"/></el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="状态"><dict-tag :options="dict.type.tool_status" :value="detailData.status"/></el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="工具用途">{{toolDetail.toolUse}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="工具用途">{{detailData.toolUse}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="测评情况">{{toolDetail.testSituation}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="测评情况">{{detailData.testSituation}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="功能描述">{{toolDetail.functionDesc}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="功能描述">{{detailData.functionDesc}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="适用条件">{{toolDetail.applyCondition}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="适用条件">{{detailData.applyCondition}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="操作说明">{{toolDetail.operateExplain}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="操作说明">{{detailData.operateExplain}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="备注">{{toolDetail.remark}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="备注">{{detailData.remark}}</el-form-item> </el-col>
                 <el-col :span="24">
                   <el-form-item label="关联工具">
-                     <el-tag :key="tag.toolId" v-for="tag in JSON.parse(toolDetail.association)" type="info" style="margin-right: 5px">{{tag.toolName}}</el-tag>
+                    <span v-if="detailData.association != null && detailData.association != '' && detailData.association != undefined">
+                     <el-tag :key="tag.toolId" v-for="tag in JSON.parse(detailData.association)" type="info" style="margin-right: 5px">{{tag.toolName}}</el-tag>
+                    </span>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -47,7 +49,7 @@
                 <span>{{ parseTime(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="操作" align="center" width="180" v-if="toolDetail.downloadStatus">
+            <el-table-column label="操作" align="center" width="180" v-if="detailData.downloadStatus">
               <template slot-scope="scope">
                 <el-button
                   size="mini"
@@ -119,7 +121,7 @@
     </el-dialog>
 
     <!-- 上传 -->
-    <AddDoc :show.sync="open" :toolId="toolDetail.toolId" @callback="getDocList"/>
+    <AddDoc :show.sync="open" :toolId="detailData.toolId" @callback="getDocList"/>
   </div><!--fbox1 左右分栏-->
 </template>
 
@@ -127,6 +129,7 @@
   import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
   import { listDiscussions, addDiscussions } from "@/api/tool/discussions.js";
   import { listReplies, addReplies} from "@/api/tool/replies.js";
+  import { getTool } from "@/api/tool/tool.js";
 
   import AddDoc from './AddDoc'
   import editDocument from "../document/editDocument";
@@ -141,6 +144,7 @@
       toolDetail: {
         type: Object,
         default: {},
+        required: false
       }
     },
     data(){
@@ -166,9 +170,13 @@
         repliesList: [],
         showReplyForm: [],
         replyContent: [],
+        detailLoading: false,
+        //详细数据
+        detailData:{}
       }
     },
     created(){
+      this.getDetail()
       this.getDocList()
       this.getDiscussionsList()
     },
@@ -370,6 +378,21 @@
       },
       handleBeforeClose() {
         this.viewDialogOpen = false
+      },
+      /** 获取详情信息 **/
+      getDetail(){
+        let self = this
+        console.info("self.toolDetail==========", self.toolDetail)
+        self.detailLoading = true
+        getTool(self.toolDetail.toolId).then((res) => {
+          self.detailData = res.data
+          console.info("res========", res)
+          /*let formData = res.data;
+          formData.type = _this.form.type
+          _this.form = formData*/
+        }).finally(()=>{
+          self.detailLoading = false
+        });
       }
     }
   }