fix: 修复上传文件夹卡住进度条的问题

This commit is contained in:
jmal 2024-05-29 18:33:32 +08:00
parent 0583e19605
commit bd392f016a
4 changed files with 28 additions and 55 deletions

View File

@ -2736,15 +2736,6 @@ export default {
this.highlightNewFile() this.highlightNewFile()
// 设置挂载文件的用户名(文件的所有者) // 设置挂载文件的用户名(文件的所有者)
this.setMountFileOwner() this.setMountFileOwner()
// 存储类型
let storageType = 'Object'
if (this.fileList.length > 0) {
const pathRegex = /([a-zA-Z]:\\[^*|"<>?\n]*)|(\/[^*|"<>?\n]*)/
if (!pathRegex.test(this.fileList[0].id)) {
storageType = 'File'
}
}
const path = this.$route.query.path ? this.$route.query.path : '/' const path = this.$route.query.path ? this.$route.query.path : '/'
const basePath = this.$route.query.basePath const basePath = this.$route.query.basePath
? this.$route.query.basePath ? this.$route.query.basePath
@ -2755,11 +2746,6 @@ export default {
if (this.path === '/') { if (this.path === '/') {
this.path = '' this.path = ''
} }
this.$store.dispatch('updateMessage', {
event: 'storageTypeChange',
data: storageType,
})
}, },
// 设置挂载文件的用户名(文件的所有者) // 设置挂载文件的用户名(文件的所有者)
setMountFileOwner() { setMountFileOwner() {

View File

@ -128,11 +128,11 @@ export default {
username: this.$store.state.user.name, username: this.$store.state.user.name,
options: { options: {
target: api.simpleUploadURL, target: api.simpleUploadURL,
chunkSize: 5 * 1024 * 1024, chunkSize: localStorage.getItem('uploader_chunk_size') || 1024 * 1024,
// speedSmoothingFactor: 0.1, // speedSmoothingFactor: 0.1,
// progressCallbacksInterval: 500, // progressCallbacksInterval: 500,
maxChunkRetries: 3, // 最大重试次数 maxChunkRetries: 3, // 最大重试次数
simultaneousUploads: 3, // 并发上传数 simultaneousUploads: 5, // 并发上传数
testChunks: true, // 是否开启服务器分片校验 testChunks: true, // 是否开启服务器分片校验
// 服务器分片校验函数,秒传及断点续传基础 // 服务器分片校验函数,秒传及断点续传基础
checkChunkUploadedByResponse: function (chunk, message) { checkChunkUploadedByResponse: function (chunk, message) {
@ -203,7 +203,7 @@ export default {
}, },
message(msg) { message(msg) {
switch (msg.event) { switch (msg.event) {
case 'storageTypeChange': case 'uploaderChunkSize':
this.onStorageTypeChange(msg.data) this.onStorageTypeChange(msg.data)
break break
case 'fileListScrollTop': case 'fileListScrollTop':
@ -229,17 +229,6 @@ export default {
$('#folder-uploader-btn').click() $('#folder-uploader-btn').click()
} }
break break
case 'request':
if (msg.data === 0) {
if (this.uploader.fileList.length === 0 && this.panelShow) {
this.fileListLength = this.uploader.fileList.length
this.process = 100
this.setPageTitle()
this.uploader.cancel()
this.displayPanel(false)
}
}
break
} }
} }
}, },
@ -291,17 +280,10 @@ export default {
destroyed() { destroyed() {
}, },
methods: { methods: {
onStorageTypeChange(storageType) { onStorageTypeChange(chunkSize) {
if (storageType === 'File') { localStorage.setItem('uploader_chunk_size', chunkSize)
if (this.options.chunkSize === 1024 * 1024) { if (this.options.chunkSize !== chunkSize && !this.panelShow) {
return this.updateChunkSize(chunkSize)
}
this.updateChunkSize(1024 * 1024)
} else {
if (this.options.chunkSize === 5 * 1024 * 1024) {
return
}
this.updateChunkSize(5 * 1024 * 1024)
} }
}, },
initUploader() { initUploader() {
@ -361,12 +343,20 @@ export default {
}).then(() => { }).then(() => {
this.doUploadBefore(files) this.doUploadBefore(files)
}).catch(() => { }).catch(() => {
this.uploader.cancel() this.uploaderCancel()
}) })
} else { } else {
this.doUploadBefore(files) this.doUploadBefore(files)
} }
}, },
uploaderCancel() {
this.uploader.cancel()
this.displayPanel(false)
const chunkSize = localStorage.getItem('uploader_chunk_size');
if (chunkSize !== this.uploader.opts.chunkSize) {
this.updateChunkSize(Number.parseInt(chunkSize))
}
},
displayPanel(display) { displayPanel(display) {
this.panelShow = display this.panelShow = display
}, },
@ -442,7 +432,6 @@ export default {
message: res.message, message: res.message,
type: 'error' type: 'error'
}) })
this.uploader.cancel()
this.close() this.close()
return; return;
} }
@ -506,8 +495,7 @@ export default {
} }
if (this.process === -10 || this.process === 100 || this.fileListLength === 0) { if (this.process === -10 || this.process === 100 || this.fileListLength === 0) {
this.uploader.cancel() this.uploaderCancel()
this.displayPanel(false)
} }
}, },
onFileError(rootFile, file, response) { onFileError(rootFile, file, response) {
@ -657,16 +645,14 @@ export default {
}, },
close() { close() {
if (this.process === -10 || this.process === 100 || this.fileListLength === 0) { if (this.process === -10 || this.process === 100 || this.fileListLength === 0) {
this.uploader.cancel() this.uploaderCancel()
this.displayPanel(false)
} else { } else {
this.$confirm('还有文件正在上传, 确定要关闭吗?', '提示', { this.$confirm('还有文件正在上传, 确定要关闭吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.uploader.cancel() this.uploaderCancel()
this.displayPanel(false)
}) })
} }
}, },
@ -829,7 +815,7 @@ export default {
padding: 0; padding: 0;
margin: 0; margin: 0;
> li { >>> li {
background-color: #fff; background-color: #fff;
} }
} }
@ -849,7 +835,7 @@ export default {
font-size: 16px; font-size: 16px;
} }
> .uploader-file-icon { >>> .uploader-file-icon {
&:before { &:before {
content: "" !important; content: "" !important;
} }
@ -877,21 +863,21 @@ export default {
} }
} }
> .uploader-file-actions > span { >>> .uploader-file-actions > span {
margin-right: 6px; margin-right: 6px;
} }
} }
> .uploader-file-status { >>> .uploader-file-status {
width: 32%; width: 32%;
text-indent: 20px; text-indent: 20px;
} }
> .uploader-file-meta { >>> .uploader-file-meta {
width: 0; width: 0;
} }
> .uploader-file-icon { >>> .uploader-file-icon {
width: 32px; width: 32px;
height: 32px; height: 32px;
display: inline-block; display: inline-block;
@ -900,7 +886,7 @@ export default {
margin-right: 8px; margin-right: 8px;
} }
> .uploader-file-actions > span { >>> .uploader-file-actions > span {
margin-right: 6px; margin-right: 6px;
margin-left: 8px; margin-left: 8px;
} }

View File

@ -55,6 +55,8 @@ function onMessage(msg) {
const url = msg.url const url = msg.url
if (url === 'synced') { if (url === 'synced') {
store.dispatch('updateMessage', {event: 'msg/synced', data: msg}) store.dispatch('updateMessage', {event: 'msg/synced', data: msg})
} else if (url === 'uploaderChunkSize') {
store.dispatch('updateMessage', {event: 'uploaderChunkSize', data: msg.body})
} else { } else {
store.dispatch('updateMessage', {event: 'msg/file/change', data: msg}) store.dispatch('updateMessage', {event: 'msg/file/change', data: msg})
if ('operationFile' === url) { if ('operationFile' === url) {

View File

@ -57,7 +57,6 @@ service.interceptors.response.use(
* You can also judge the status by HTTP Status Code * You can also judge the status by HTTP Status Code
*/ */
response => { response => {
store.dispatch('updateMessage', {event: 'request', data: 0})
const res = response.data const res = response.data
if (res.code !== 0) { if (res.code !== 0) {
if (res.code === -2) { if (res.code === -2) {