{"remainingRequest":"D:\\jenkins\\workspace\\xypm-web-prod\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\xypm-web-prod\\src\\components\\upload\\fileUpload.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\xypm-web-prod\\src\\components\\upload\\fileUpload.vue","mtime":1667333350884},{"path":"D:\\jenkins\\workspace\\xypm-web-prod\\node_modules\\babel-loader\\lib\\index.js","mtime":456789000000},{"path":"D:\\jenkins\\workspace\\xypm-web-prod\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xypm-web-prod\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\n/**\r\n *   全局上传插件\r\n *   调用方法：this.$bus.$emit('openUploader', {}) 打开文件选择框，参数为需要传递的额外参数\r\n *   监听函数：this.$bus.$on('fileAdded', fn); 文件选择后的回调\r\n *            this.$bus.$on('fileSuccess', fn); 文件上传成功的回调\r\n */\r\nimport {ACCEPT_CONFIG} from './js/config'\r\nimport Bus from './js/bus.js'\r\nimport SparkMD5 from 'spark-md5'\r\n// // 这两个是我自己项目中用的，请忽略\r\n// import {Ticket} from '@/assets/js/utils';\r\n// import api from '@/api';\r\nexport default {\r\n  data() {\r\n    return {\r\n      options: {\r\n        target: window.context.cqxy + '/biz/universal/accessory/v1/ShardUpload',\r\n        //  /biz/universal/accessory/v1/minioUpload\r\n        //  /biz/universal/accessory/v1/ShardUpload\r\n        chunkSize: '2048000',\r\n        fileParameterName: 'file',\r\n        maxChunkRetries: 3,\r\n        testChunks: true, //是否开启服务器分片校验\r\n        // 服务器分片校验函数，秒传及断点续传基础\r\n        checkChunkUploadedByResponse: function(chunk, message) {\r\n          if (message) {\r\n            let objMessage = JSON.parse(message)\r\n            if (objMessage.skipUpload) {\r\n              return true\r\n            }\r\n            return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0\r\n          }\r\n        },\r\n        headers: {Authorization: ''},\r\n        'Content-Type':\r\n          'multipart/form-data; boundary=----WebKitFormBoundaryKIEIaJFJwN7T1GQQ',\r\n        query: (file, chunk) => {\r\n          return {\r\n            ...file.params\r\n          }\r\n        }\r\n      },\r\n      attrs: {\r\n        accept: ACCEPT_CONFIG.getAll()\r\n      },\r\n      panelShow: false, //选择文件后，展示上传panel\r\n      collapse_: false,\r\n      params: {},\r\n      isDrag: false\r\n    }\r\n  },\r\n  mounted() {\r\n    this.getToken()\r\n    this.$bus.$on('openUploader', query => {\r\n      this.key_ = query\r\n      Object.prototype.toString.call(query) == '[object String]' ? '' : query\r\n      this.params = query || {}\r\n      if (this.$refs.uploadBtn) {\r\n        $('#global-uploader-btn').click()\r\n      }\r\n    })\r\n    this.$bus.$on('openUploader2', query => {\r\n      this.isDrag = true\r\n      this.key_ = query\r\n      Object.prototype.toString.call(query) == '[object String]' ? '' : query\r\n      this.params = query || {}\r\n    })\r\n  },\r\n  computed: {\r\n    //Uploader实例\r\n    uploader() {\r\n      return this.$refs.uploader.uploader\r\n    }\r\n  },\r\n  created() {},\r\n  methods: {\r\n    handleCloseDrag() {\r\n      this.isDrag = false\r\n    },\r\n    handleUpload() {\r\n      this.$bus.$emit('openUploader')\r\n    },\r\n    getToken() {\r\n      if (window.sessionStorage.getItem('currentUser')) {\r\n        let token = JSON.parse(window.sessionStorage.getItem('currentUser'))\r\n          .token\r\n        this.options.headers.Authorization = 'Bearer ' + token\r\n      } else {\r\n        this.options.headers.Authorization = ''\r\n      }\r\n    },\r\n    onFileAdded(file) {\r\n      this.panelShow = true\r\n      this.computeMD5(file)\r\n      // 2022/1/10 将额外的参数赋值到每个文件上，解决了不同文件使用不同params的需求\r\n      file.params = this.params\r\n      this.$bus.$emit('fileAdded')\r\n    },\r\n    onFileProgress(rootFile, file, chunk) {\r\n      console.log(rootFile, file, chunk)\r\n      console.log(\r\n        `上传中 ${file.name}，chunk：${chunk.startByte /\r\n          1024 /\r\n          1024} ~ ${chunk.endByte / 1024 / 1024}`\r\n      )\r\n    },\r\n    onFileSuccess(rootFile, file, response, chunk) {\r\n      console.log(file, response, 'file')\r\n      let res = JSON.parse(response)\r\n      console.log(res, '上传返回数据')\r\n      // 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的\r\n      if (!res.state) {\r\n        this.$message({message: res.message, type: 'error'})\r\n        // 文件状态设为“失败”\r\n        this.statusSet(file.id, 'failed')\r\n        return\r\n      }\r\n      console.log('上传成功')\r\n      //上传成功之后发起请求合并\r\n      let bizPath = ''\r\n      let fileName = encodeURIComponent(file.name) //解码decodeURIComponent()\r\n      console.log(file, '文件分片')\r\n      this.$http\r\n        .post(\r\n          '${cqxy}/biz/universal/accessory/v1/mergeFileToMinIO?bizPath=' +\r\n            bizPath +\r\n            '&fileName=' +\r\n            fileName\r\n        )\r\n        .then(res => {\r\n          res.data.value.key_ = this.key_\r\n          //传递文件实际大小\r\n          res.data.value.fileSizeB = file.size\r\n          this.$bus.$emit('fileSuccess', res.data.value)\r\n          console.log(res.data.value, '合并返回数据')\r\n        })\r\n      // // 如果服务端返回需要合并\r\n      // if (res.needMerge) {\r\n      //   // 文件状态设为“合并中”\r\n      //   this.statusSet(file.id, 'merging')\r\n      //   // api.mergeSimpleUpload({\r\n      //   //     tempName: res.tempName,\r\n      //   //     fileName: file.name,\r\n      //   //     ...file.params,\r\n      //   // }).then(res => {\r\n      //   //     // 文件合并成功\r\n      //   //     this.$bus.$emit('fileSuccess');\r\n      //   //     this.statusRemove(file.id);\r\n      //   // }).catch(e => {});\r\n      //   // 不需要合并\r\n      // } else {\r\n      //   this.$bus.$emit('fileSuccess')\r\n      //   console.log('上传成功')\r\n      // }\r\n    },\r\n    onFileError(rootFile, file, response, chunk) {\r\n      this.$message({\r\n        message: response,\r\n        type: 'error'\r\n      })\r\n    },\r\n    /**\r\n     * 计算md5，实现断点续传及秒传\r\n     * @param file\r\n     */\r\n    computeMD5(file) {\r\n      let fileReader = new FileReader()\r\n      let time = new Date().getTime()\r\n      let blobSlice =\r\n        File.prototype.slice ||\r\n        File.prototype.mozSlice ||\r\n        File.prototype.webkitSlice\r\n      let currentChunk = 0\r\n      const chunkSize = 10 * 1024 * 1000 * 4\r\n      let chunks = Math.ceil(file.size / chunkSize)\r\n      let spark = new SparkMD5.ArrayBuffer()\r\n      // 文件状态设为\"计算MD5\"\r\n      this.statusSet(file.id, 'md5')\r\n      file.pause()\r\n      loadNext()\r\n      fileReader.onload = e => {\r\n        spark.append(e.target.result)\r\n        if (currentChunk < chunks) {\r\n          currentChunk++\r\n          loadNext()\r\n          // 实时展示MD5的计算进度\r\n          this.$nextTick(() => {\r\n            $(`.myStatus_${file.id}`).text(\r\n              '校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'\r\n            )\r\n          })\r\n        } else {\r\n          let md5 = spark.end()\r\n          this.computeMD5Success(md5, file)\r\n          console.log(\r\n            `MD5计算完毕：${file.name} \\nMD5：${md5} \\n分片：${chunks} 大小:${\r\n              file.size\r\n            } 用时：${new Date().getTime() - time} ms`\r\n          )\r\n        }\r\n      }\r\n      fileReader.onerror = function() {\r\n        this.error(`文件${file.name}读取出错，请检查该文件`)\r\n        file.cancel()\r\n      }\r\n      function loadNext() {\r\n        let start = currentChunk * chunkSize\r\n        let end = start + chunkSize >= file.size ? file.size : start + chunkSize\r\n        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))\r\n      }\r\n    },\r\n    computeMD5Success(md5, file) {\r\n      file.uniqueIdentifier = md5\r\n      file.resume()\r\n      this.statusRemove(file.id)\r\n    },\r\n    fileListShow() {\r\n      let $list = $('#global-uploader .file-list')\r\n      if ($list.is(':visible')) {\r\n        $list.slideUp()\r\n        this.collapse_ = true\r\n      } else {\r\n        $list.slideDown()\r\n        this.collapse_ = false\r\n      }\r\n    },\r\n    close() {\r\n      this.uploader.cancel()\r\n      this.panelShow = false\r\n    },\r\n\r\n    /**\r\n     * 新增的自定义的状态: 'md5'、'transcoding'、'failed'\r\n     * @param id\r\n     * @param status\r\n     */\r\n    statusSet(id, status) {\r\n      let statusMap = {\r\n        md5: {\r\n          text: '校验MD5',\r\n          bgc: '#fff'\r\n        },\r\n        merging: {\r\n          text: '合并中',\r\n          bgc: '#e2eeff'\r\n        },\r\n        transcoding: {\r\n          text: '转码中',\r\n          bgc: '#e2eeff'\r\n        },\r\n        failed: {\r\n          text: '上传失败',\r\n          bgc: '#e2eeff'\r\n        }\r\n      }\r\n      this.$nextTick(() => {\r\n        $(`<p class=\"myStatus_${id}\"></p>`)\r\n          .appendTo(`.file_${id} .uploader-file-status`)\r\n          .css({\r\n            position: 'absolute',\r\n            top: '0',\r\n            left: '0',\r\n            right: '0',\r\n            bottom: '0',\r\n            zIndex: '1',\r\n            backgroundColor: statusMap[status].bgc\r\n          })\r\n          .text(statusMap[status].text)\r\n      })\r\n    },\r\n    statusRemove(id) {\r\n      this.$nextTick(() => {\r\n        $(`.myStatus_${id}`).remove()\r\n      })\r\n    },\r\n    error(msg) {\r\n      this.$notify({\r\n        title: '错误',\r\n        message: msg,\r\n        type: 'error',\r\n        duration: 2000\r\n      })\r\n    }\r\n  },\r\n  watch: {},\r\n  destroyed() {\r\n    this.$bus.$off('openUploader')\r\n  },\r\n  components: {}\r\n}\r\n",null]}