|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<!--上传组件--> |
|
|
|
<el-dialog class="big-file" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="uploadBigVisible"> |
|
|
|
<el-dialog class="big-file" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="uploadBigVisible" :before-close="handleCloseDialog"> |
|
|
|
<template #title> |
|
|
|
{{ uploadTitle }} |
|
|
|
<span style="color: red;font-size: 12px; ">单个文件不可超过10GB</span> |
|
|
|
@ -21,31 +21,29 @@ |
|
|
|
<uploader-unsupport /> |
|
|
|
<uploader-drop> |
|
|
|
<p>将文件拖到此处，或点击上传</p> |
|
|
|
<uploader-btn single> |
|
|
|
<uploader-btn> |
|
|
|
<slot> |
|
|
|
<i class="iconfont icon-tianjiawenjian upload-icon" /> |
|
|
|
</slot> |
|
|
|
</uploader-btn> |
|
|
|
<div class="el-upload__tip">上传限制文件大小：最大10GB/个</div> |
|
|
|
<!-- <uploader-btn :attrs="attrs">选择图片</uploader-btn> |
|
|
|
<uploader-btn :directory="true">选择文件夹</uploader-btn> --> |
|
|
|
</uploader-drop> |
|
|
|
<uploader-files /> |
|
|
|
<!-- <ul class="file-list"> |
|
|
|
<li |
|
|
|
v-for="file in fileList" |
|
|
|
:key="file.id" |
|
|
|
class="file-item" |
|
|
|
:class="`file-${file.id}`" |
|
|
|
> |
|
|
|
<!-- <uploader-files /> --> |
|
|
|
<uploader-list> |
|
|
|
<!--通过slot-scope绑定文件实例--> |
|
|
|
<div slot-scope="props" class="set-file"> |
|
|
|
<div v-for="(file,i) in props.fileList" :key="i"> |
|
|
|
<uploader-file |
|
|
|
ref="files" |
|
|
|
:class="'file_' + file.id" |
|
|
|
:file="file" |
|
|
|
:list="true" |
|
|
|
:file="file" |
|
|
|
:class=" file.fileType.substring(0, file.fileType.indexOf('/')) === 'image' ? 'icon-image' : `icon-`+file.name.substring( |
|
|
|
file.name.lastIndexOf('.') + 1, |
|
|
|
file.name.length |
|
|
|
)" |
|
|
|
/> |
|
|
|
</li> |
|
|
|
</ul> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</uploader-list> |
|
|
|
</uploader> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
@ -98,7 +96,7 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
uploadTitle: '大文件上传', |
|
|
|
uploadTitle: '文件上传', |
|
|
|
btnLoading: false, |
|
|
|
uploadBigVisible: false, |
|
|
|
skip: false, |
|
|
|
@ -106,7 +104,7 @@ export default { |
|
|
|
target: null, |
|
|
|
// 开启服务端分片校验功能 |
|
|
|
testChunks: true, // 是否分片 |
|
|
|
singleFile: true, // 单文件上传 |
|
|
|
singleFile: false, // 多文件上传 |
|
|
|
uploadMethod: 'post', // 真正上传的时候使用的 HTTP 方法,默认 POST |
|
|
|
allowDuplicateUploads: false, // 上传过得文件不可以再上传 |
|
|
|
parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) { |
|
|
|
@ -190,12 +188,12 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
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() // 这句代码是删除所选上传文件的关键 |
|
|
|
} |
|
|
|
this.fileList = this.fileList.filter(f => f.uniqueIdentifier !== file.uniqueIdentifier) |
|
|
|
}, |
|
|
|
handleUploadConfirm() { |
|
|
|
if (this.$refs.uploader.fileList.length === 0) { |
|
|
|
@ -203,21 +201,25 @@ export default { |
|
|
|
return false |
|
|
|
} |
|
|
|
this.nowDate = getCurrentTime() |
|
|
|
this.$refs.uploader.fileList.map(async(item, index) => { |
|
|
|
const jsonArrayToSend = [] |
|
|
|
|
|
|
|
// 使用 Promise.all 确保所有异步操作完成 |
|
|
|
Promise.all(this.$refs.uploader.fileList.map(async(item) => { |
|
|
|
const json = {} |
|
|
|
const jsonArray = [] |
|
|
|
const jsonString = {} |
|
|
|
|
|
|
|
if (item.file.type.substring(0, item.file.type.indexOf('/')) === 'image') { |
|
|
|
const fileBase64 = await this.getBase64(item) |
|
|
|
const fileBase64 = await this.getBase64(item.file) |
|
|
|
const imgRes = await this.getImgPx(fileBase64) |
|
|
|
item.file.px = imgRes.width + 'px*' + imgRes.height + 'px' |
|
|
|
} else { |
|
|
|
item.file.px = '' |
|
|
|
} |
|
|
|
|
|
|
|
jsonString.file_name = item.file.name |
|
|
|
jsonString.file_size = item.file.size |
|
|
|
jsonString.file_type = item.file.name.substring(item.name.lastIndexOf('.') + 1, item.file.name.length) |
|
|
|
// jsonString.file_path = res.data.data |
|
|
|
json.last_modified = item.file.lastModified |
|
|
|
jsonString.file_path = '' |
|
|
|
jsonString.sequence = null |
|
|
|
@ -232,23 +234,26 @@ export default { |
|
|
|
json.archivesId = this.arcId |
|
|
|
json.identifier = item.uniqueIdentifier |
|
|
|
json.filename = item.name |
|
|
|
// chunk.offset |
|
|
|
json.totalChunks = item.chunks.length - 1 |
|
|
|
json.totalSize = item.size |
|
|
|
json.fileJsonString = JSON.stringify(jsonArray) |
|
|
|
|
|
|
|
if (item.completed && this.submitted) { |
|
|
|
jsonArrayToSend.push(json) |
|
|
|
})).then(() => { |
|
|
|
console.log('jsonArrayToSend', jsonArrayToSend) |
|
|
|
if (this.$refs.uploader.fileList.every(item => item.completed) && this.submitted) { |
|
|
|
this.btnLoading = true |
|
|
|
this.submitted = false |
|
|
|
|
|
|
|
axios.post(this.baseApi + '/api/collect/merge', json, { headers: { |
|
|
|
axios.post(this.baseApi + '/api/collect/merge', jsonArrayToSend, { |
|
|
|
headers: { |
|
|
|
'Authorization': getToken() |
|
|
|
}}).then((res) => { |
|
|
|
} |
|
|
|
}).then((res) => { |
|
|
|
console.log(res) |
|
|
|
if (res.data.code === 200 && res.data.data !== '') { |
|
|
|
this.$message({ message: '上传成功', type: 'success', offset: 8 }) |
|
|
|
this.$message({ message: '所有文件上传成功', type: 'success', offset: 8 }) |
|
|
|
} else { |
|
|
|
this.$message({ message: '上传失败', type: 'error', offset: 8 }) |
|
|
|
this.$message({ message: '部分或全部文件上传失败', type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
this.$emit('close-dialog') |
|
|
|
this.uploadBigVisible = false |
|
|
|
@ -266,19 +271,19 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
onFileError(rootFile, file, message, chunk) { |
|
|
|
this.$message({ message: '上传出错：' + message, type: 'error', offset: 8 }) |
|
|
|
this.$message({ message: `上传出错：${file.name} - ${message}`, type: 'error', offset: 8 }) |
|
|
|
}, |
|
|
|
handleRepeatFileCancel() { |
|
|
|
this.repeatFileVisible = false |
|
|
|
this.repeatFileData = [] |
|
|
|
this.originFileData = [] |
|
|
|
const uploaderInstance = this.$refs.uploader.uploader |
|
|
|
uploaderInstance.fileList[0].cancel() |
|
|
|
uploaderInstance.fileList.forEach(file => file.cancel()) |
|
|
|
}, |
|
|
|
handleRepeatFile(type) { |
|
|
|
if (type === 0) { |
|
|
|
// 直接上传 |
|
|
|
this.computeMD5(this.fileList[0]) |
|
|
|
this.fileList.forEach(file => this.computeMD5(file)) |
|
|
|
} else { |
|
|
|
// 去重后上传 |
|
|
|
const nonRepeatFileData = this.fileList.filter(file => !this.repeatFileData.some(repeatFile => repeatFile.name === file.name)) |
|
|
|
@ -287,13 +292,17 @@ export default { |
|
|
|
this.handleRepeatFileCancel() |
|
|
|
this.handleCloseDialog() |
|
|
|
} else { |
|
|
|
this.computeMD5(this.fileList) |
|
|
|
// 更新上传组件的文件列表 |
|
|
|
// this.$refs.uploader.fileList |
|
|
|
const uploaderInstance = this.$refs.uploader |
|
|
|
uploaderInstance.fileList = uploaderInstance.fileList.filter(file => nonRepeatFileData.some(nonRepeatFile => nonRepeatFile.uniqueIdentifier === file.uniqueIdentifier)) |
|
|
|
this.$refs.uploader.files = this.$refs.uploader.files.filter(file => nonRepeatFileData.some(nonRepeatFile => nonRepeatFile.uniqueIdentifier === file.uniqueIdentifier)) |
|
|
|
nonRepeatFileData.forEach(file => this.computeMD5(file)) |
|
|
|
} |
|
|
|
} |
|
|
|
this.repeatFileVisible = false |
|
|
|
}, |
|
|
|
async filesAdded(file, fileList, event) { |
|
|
|
this.fileList = [] |
|
|
|
// 先获取原文件列表 |
|
|
|
await this.getFileList() |
|
|
|
|
|
|
|
@ -395,9 +404,14 @@ export default { |
|
|
|
}, |
|
|
|
handleCloseDialog(done) { |
|
|
|
this.uploadBigVisible = false |
|
|
|
this.fileList = [] |
|
|
|
const uploaderInstance = this.$refs.uploader.uploader |
|
|
|
uploaderInstance.fileList[0].cancel() |
|
|
|
console.log('uploaderInstance.fileList', uploaderInstance.fileList) |
|
|
|
uploaderInstance.fileList.forEach(file => file.cancel()) |
|
|
|
uploaderInstance.fileList = [] |
|
|
|
uploaderInstance.files = [] |
|
|
|
this.fileList = [] |
|
|
|
this.$refs.uploader.files = [] |
|
|
|
this.$refs.uploader.fileList = [] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -452,4 +466,72 @@ export default { |
|
|
|
.uploader-file[status="success"] .uploader-file-remove { |
|
|
|
display:block |
|
|
|
} |
|
|
|
::v-deep .uploader-list{ |
|
|
|
max-height: 344px; |
|
|
|
overflow-y: scroll; |
|
|
|
.uploader-file-size{ |
|
|
|
text-align: right !important; |
|
|
|
} |
|
|
|
.uploader-file-icon:before{ |
|
|
|
content: ""; |
|
|
|
} |
|
|
|
.uploader-file-name{ |
|
|
|
text-align: left !important; |
|
|
|
} |
|
|
|
.uploader-file{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/attachment.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
&.icon-image{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/image.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
&.icon-excel,&.icon-xlsx,&.icon-xls{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/excel.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
&.icon-pdf{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/pdf.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
&.icon-ppt, &.icon-pptx{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/ppt.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
&.icon-word,&.icon-docx,&.icon-doc{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/word.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
&.icon-zip,&.icon-rar{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/zip.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
&.icon-txt{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/txt.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
&.icon-ofd{ |
|
|
|
.uploader-file-icon:before{ |
|
|
|
background: url("~@/assets/images/fileIcon/OFD.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
