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