|  | @ -11,6 +11,7 @@ | 
		
	
		
			
				|  |  |           @file-success="fileSuccess" |  |  |           @file-success="fileSuccess" | 
		
	
		
			
				|  |  |           @files-added="filesAdded" |  |  |           @files-added="filesAdded" | 
		
	
		
			
				|  |  |           @file-error="onFileError" |  |  |           @file-error="onFileError" | 
		
	
		
			
				|  |  |  |  |  |           @file-removed="filesRemove" | 
		
	
		
			
				|  |  |         > |  |  |         > | 
		
	
		
			
				|  |  |           <uploader-unsupport /> |  |  |           <uploader-unsupport /> | 
		
	
		
			
				|  |  |           <uploader-drop> |  |  |           <uploader-drop> | 
		
	
	
		
			
				|  | @ -24,9 +25,8 @@ | 
		
	
		
			
				|  |  |             <!-- <uploader-btn :attrs="attrs">选择图片</uploader-btn> |  |  |             <!-- <uploader-btn :attrs="attrs">选择图片</uploader-btn> | 
		
	
		
			
				|  |  |               <uploader-btn :directory="true">选择文件夹</uploader-btn> --> |  |  |               <uploader-btn :directory="true">选择文件夹</uploader-btn> --> | 
		
	
		
			
				|  |  |           </uploader-drop> |  |  |           </uploader-drop> | 
		
	
		
			
				|  |  |           <!-- <uploader-files /> --> |  |  |  | 
		
	
		
			
				|  |  | 
 |  |  |  | 
		
	
		
			
				|  |  |           <ul class="file-list"> |  |  |  | 
		
	
		
			
				|  |  |  |  |  |           <uploader-files /> | 
		
	
		
			
				|  |  |  |  |  |           <!-- <ul class="file-list"> | 
		
	
		
			
				|  |  |             <li |  |  |             <li | 
		
	
		
			
				|  |  |               v-for="file in fileList" |  |  |               v-for="file in fileList" | 
		
	
		
			
				|  |  |               :key="file.id" |  |  |               :key="file.id" | 
		
	
	
		
			
				|  | @ -40,12 +40,12 @@ | 
		
	
		
			
				|  |  |                 :list="true" |  |  |                 :list="true" | 
		
	
		
			
				|  |  |               /> |  |  |               /> | 
		
	
		
			
				|  |  |             </li> |  |  |             </li> | 
		
	
		
			
				|  |  |           </ul> |  |  |  | 
		
	
		
			
				|  |  |  |  |  |           </ul> --> | 
		
	
		
			
				|  |  |         </uploader> |  |  |         </uploader> | 
		
	
		
			
				|  |  |       </div> |  |  |       </div> | 
		
	
		
			
				|  |  |       <div slot="footer" class="dialog-footer"> |  |  |       <div slot="footer" class="dialog-footer"> | 
		
	
		
			
				|  |  |         <el-button type="text" @click="handleCloseDialog">取消</el-button> |  |  |         <el-button type="text" @click="handleCloseDialog">取消</el-button> | 
		
	
		
			
				|  |  |         <el-button type="primary" @click="handleUploadConfirm">保存</el-button> |  |  |  | 
		
	
		
			
				|  |  |  |  |  |         <el-button :loading="btnLoading" type="primary" @click="handleUploadConfirm">保存</el-button> | 
		
	
		
			
				|  |  |       </div> |  |  |       </div> | 
		
	
		
			
				|  |  |     </div> |  |  |     </div> | 
		
	
		
			
				|  |  |   </el-dialog> |  |  |   </el-dialog> | 
		
	
	
		
			
				|  | @ -75,13 +75,14 @@ export default { | 
		
	
		
			
				|  |  |   }, |  |  |   }, | 
		
	
		
			
				|  |  |   data() { |  |  |   data() { | 
		
	
		
			
				|  |  |     return { |  |  |     return { | 
		
	
		
			
				|  |  |  |  |  |       btnLoading: false, | 
		
	
		
			
				|  |  |       uploadBigVisible: false, |  |  |       uploadBigVisible: false, | 
		
	
		
			
				|  |  |       skip: false, |  |  |       skip: false, | 
		
	
		
			
				|  |  |       options: { |  |  |       options: { | 
		
	
		
			
				|  |  |         target: '/api/collect/upload', |  |  |         target: '/api/collect/upload', | 
		
	
		
			
				|  |  |         // 开启服务端分片校验功能 |  |  |         // 开启服务端分片校验功能 | 
		
	
		
			
				|  |  |         testChunks: true, // 是否分片 |  |  |         testChunks: true, // 是否分片 | 
		
	
		
			
				|  |  |         // singleFile: true,  // 单文件上传 |  |  |  | 
		
	
		
			
				|  |  |  |  |  |         singleFile: true, // 单文件上传 | 
		
	
		
			
				|  |  |         uploadMethod: 'post', // 真正上传的时候使用的 HTTP 方法,默认 POST |  |  |         uploadMethod: 'post', // 真正上传的时候使用的 HTTP 方法,默认 POST | 
		
	
		
			
				|  |  |         allowDuplicateUploads: false, // 上传过得文件不可以再上传 |  |  |         allowDuplicateUploads: false, // 上传过得文件不可以再上传 | 
		
	
		
			
				|  |  |         parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) { |  |  |         parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) { | 
		
	
	
		
			
				|  | @ -137,23 +138,31 @@ export default { | 
		
	
		
			
				|  |  |       // } else { |  |  |       // } else { | 
		
	
		
			
				|  |  |       //   console.log('上传成功,不需要合并') |  |  |       //   console.log('上传成功,不需要合并') | 
		
	
		
			
				|  |  |       // } |  |  |       // } | 
		
	
		
			
				|  |  |       if (result.code === 200) { |  |  |  | 
		
	
		
			
				|  |  |         this.submitted = false |  |  |  | 
		
	
		
			
				|  |  |       } else { |  |  |  | 
		
	
		
			
				|  |  |  |  |  |       this.fileList.push(file) | 
		
	
		
			
				|  |  |  |  |  |       if (result.code === 200 && this.fileList.length !== 0) { | 
		
	
		
			
				|  |  |         this.submitted = true |  |  |         this.submitted = true | 
		
	
		
			
				|  |  |  |  |  |       } else { | 
		
	
		
			
				|  |  |  |  |  |         this.submitted = false | 
		
	
		
			
				|  |  |       } |  |  |       } | 
		
	
		
			
				|  |  |       if (this.skip) { |  |  |       if (this.skip) { | 
		
	
		
			
				|  |  |         this.skip = false |  |  |         this.skip = false | 
		
	
		
			
				|  |  |       } |  |  |       } | 
		
	
		
			
				|  |  |     }, |  |  |     }, | 
		
	
		
			
				|  |  |  |  |  |     filesRemove(file, index) { | 
		
	
		
			
				|  |  |  |  |  |       this.fileList = [] | 
		
	
		
			
				|  |  |  |  |  |       const uploaderInstance = this.$refs.uploader.uploader | 
		
	
		
			
				|  |  |  |  |  |       const temp = uploaderInstance.fileList.findIndex(e => e.uniqueIdentifier === file.uniqueIdentifier) | 
		
	
		
			
				|  |  |  |  |  |       if (temp > -1) { | 
		
	
		
			
				|  |  |  |  |  |         uploaderInstance.fileList[temp].cancel() // 这句代码是删除所选上传文件的关键 | 
		
	
		
			
				|  |  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |  |     }, | 
		
	
		
			
				|  |  |     handleUploadConfirm() { |  |  |     handleUploadConfirm() { | 
		
	
		
			
				|  |  |       if (this.submitted) { |  |  |  | 
		
	
		
			
				|  |  |         return |  |  |  | 
		
	
		
			
				|  |  |  |  |  |       if (this.$refs.uploader.fileList.length === 0) { | 
		
	
		
			
				|  |  |  |  |  |         this.$message.error('请选择要上传的文件!') | 
		
	
		
			
				|  |  |  |  |  |         return false | 
		
	
		
			
				|  |  |       } |  |  |       } | 
		
	
		
			
				|  |  |       this.submitted = true |  |  |  | 
		
	
		
			
				|  |  |       this.nowDate = getCurrentTime() |  |  |       this.nowDate = getCurrentTime() | 
		
	
		
			
				|  |  |       const filePromises = this.fileList.map(async(item, index) => { |  |  |  | 
		
	
		
			
				|  |  |         console.log(item) |  |  |  | 
		
	
		
			
				|  |  |  |  |  |       this.$refs.uploader.fileList.map(async(item, index) => { | 
		
	
		
			
				|  |  |         const json = {} |  |  |         const json = {} | 
		
	
		
			
				|  |  |         const jsonArray = [] |  |  |         const jsonArray = [] | 
		
	
		
			
				|  |  |         const jsonString = {} |  |  |         const jsonString = {} | 
		
	
	
		
			
				|  | @ -186,43 +195,38 @@ export default { | 
		
	
		
			
				|  |  |         json.totalSize = item.size |  |  |         json.totalSize = item.size | 
		
	
		
			
				|  |  |         json.fileJsonString = JSON.stringify(jsonArray) |  |  |         json.fileJsonString = JSON.stringify(jsonArray) | 
		
	
		
			
				|  |  | 
 |  |  | 
 | 
		
	
		
			
				|  |  |         if (item.completed) { |  |  |  | 
		
	
		
			
				|  |  |           return axios.post(this.baseApi + '/api/collect/merge', json, { headers: { |  |  |  | 
		
	
		
			
				|  |  |  |  |  |         if (item.completed && this.submitted) { | 
		
	
		
			
				|  |  |  |  |  |           this.btnLoading = true | 
		
	
		
			
				|  |  |  |  |  |           this.submitted = false | 
		
	
		
			
				|  |  |  |  |  |           axios.post(this.baseApi + '/api/collect/merge', json, { headers: { | 
		
	
		
			
				|  |  |             'Authorization': getToken() |  |  |             'Authorization': getToken() | 
		
	
		
			
				|  |  |           }}) |  |  |  | 
		
	
		
			
				|  |  |  |  |  |           }}).then((res) => { | 
		
	
		
			
				|  |  |  |  |  |             console.log(res) | 
		
	
		
			
				|  |  |  |  |  |             if (res.data.code === 200 && res.data.data !== '') { | 
		
	
		
			
				|  |  |  |  |  |               this.$message.success('上传成功') | 
		
	
		
			
				|  |  |             } else { |  |  |             } else { | 
		
	
		
			
				|  |  |           this.$message.error('请耐心等待文件上传完成后再保存!') |  |  |  | 
		
	
		
			
				|  |  |  |  |  |               this.$message.error('上传失败') | 
		
	
		
			
				|  |  |             } |  |  |             } | 
		
	
		
			
				|  |  |       }) |  |  |  | 
		
	
		
			
				|  |  |       axios.all(filePromises) |  |  |  | 
		
	
		
			
				|  |  |         .then(axios.spread((...responses) => { |  |  |  | 
		
	
		
			
				|  |  |           // 处理所有请求的响应 |  |  |  | 
		
	
		
			
				|  |  |           for (const response of responses) { |  |  |  | 
		
	
		
			
				|  |  |             // 处理单个请求的响应 |  |  |  | 
		
	
		
			
				|  |  |             if (response.data.code === 200 && response.data.data !== '') { |  |  |  | 
		
	
		
			
				|  |  |               this.$message.success('上传成功') |  |  |  | 
		
	
		
			
				|  |  |             this.$emit('close-dialog') |  |  |             this.$emit('close-dialog') | 
		
	
		
			
				|  |  |             this.uploadBigVisible = false |  |  |             this.uploadBigVisible = false | 
		
	
		
			
				|  |  |             this.fileList = [] |  |  |             this.fileList = [] | 
		
	
		
			
				|  |  |  |  |  |             this.btnLoading = false | 
		
	
		
			
				|  |  |  |  |  |             this.$refs.uploader.files = [] | 
		
	
		
			
				|  |  |  |  |  |             this.$refs.uploader.fileList = [] | 
		
	
		
			
				|  |  |  |  |  |             this.$refs.uploader.uploader.fileList = [] | 
		
	
		
			
				|  |  |  |  |  |             this.$refs.uploader.uploader.files = [] | 
		
	
		
			
				|  |  |  |  |  |           }) | 
		
	
		
			
				|  |  |         } else { |  |  |         } else { | 
		
	
		
			
				|  |  |               this.$message.error('上传失败') |  |  |  | 
		
	
		
			
				|  |  |             } |  |  |  | 
		
	
		
			
				|  |  |           this.submitted = false |  |  |           this.submitted = false | 
		
	
		
			
				|  |  |  |  |  |           this.$message.error('请耐心等待文件上传完成后再保存!') | 
		
	
		
			
				|  |  |         } |  |  |         } | 
		
	
		
			
				|  |  |         })) |  |  |  | 
		
	
		
			
				|  |  |         .catch(error => { |  |  |  | 
		
	
		
			
				|  |  |           console.error(error) |  |  |  | 
		
	
		
			
				|  |  |       }) |  |  |       }) | 
		
	
		
			
				|  |  |     }, |  |  |     }, | 
		
	
		
			
				|  |  |     onFileError(rootFile, file, message, chunk) { |  |  |     onFileError(rootFile, file, message, chunk) { | 
		
	
		
			
				|  |  |       this.$message.error('上传出错:' + message) |  |  |       this.$message.error('上传出错:' + message) | 
		
	
		
			
				|  |  |     }, |  |  |     }, | 
		
	
		
			
				|  |  |     filesAdded(file, fileList, event) { |  |  |     filesAdded(file, fileList, event) { | 
		
	
		
			
				|  |  |       this.$refs.uploader.files = [] |  |  |  | 
		
	
		
			
				|  |  |       this.$refs.uploader.fileList = [] |  |  |  | 
		
	
		
			
				|  |  | 
 |  |  |  | 
		
	
		
			
				|  |  |       file.forEach((e) => { |  |  |       file.forEach((e) => { | 
		
	
		
			
				|  |  |         this.fileList = [] |  |  |  | 
		
	
		
			
				|  |  |         this.fileList.push(e) |  |  |         this.fileList.push(e) | 
		
	
		
			
				|  |  |         this.computeMD5(e) |  |  |         this.computeMD5(e) | 
		
	
		
			
				|  |  |       }) |  |  |       }) | 
		
	
	
		
			
				|  | @ -234,7 +238,6 @@ export default { | 
		
	
		
			
				|  |  |         this.$message.warning(maxMessage) |  |  |         this.$message.warning(maxMessage) | 
		
	
		
			
				|  |  |         return false |  |  |         return false | 
		
	
		
			
				|  |  |       } |  |  |       } | 
		
	
		
			
				|  |  | 
 |  |  |  | 
		
	
		
			
				|  |  |       const fileReader = new FileReader() |  |  |       const fileReader = new FileReader() | 
		
	
		
			
				|  |  |       const time = new Date().getTime() |  |  |       const time = new Date().getTime() | 
		
	
		
			
				|  |  |       const blobSlice = |  |  |       const blobSlice = | 
		
	
	
		
			
				|  | @ -360,4 +363,7 @@ export default { | 
		
	
		
			
				|  |  |     margin: 10px 0 5px 0; |  |  |     margin: 10px 0 5px 0; | 
		
	
		
			
				|  |  |   } |  |  |   } | 
		
	
		
			
				|  |  | } |  |  | } | 
		
	
		
			
				|  |  |  |  |  | .uploader-file[status="success"] .uploader-file-remove { | 
		
	
		
			
				|  |  |  |  |  |   display:block | 
		
	
		
			
				|  |  |  |  |  | } | 
		
	
		
			
				|  |  | </style> |  |  | </style> |