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

This commit is contained in:
jmal 2024-05-28 16:53:03 +08:00
parent 2944bfca05
commit e3f50a1072
4 changed files with 25 additions and 11 deletions

View File

@ -16,11 +16,11 @@ export default {
}) })
}, },
// 检查文件是否存在 // 检查文件是否存在
checkExist: function (params) { checkExist: function (data) {
return request({ return request({
url: "checkExist", url: "checkExist",
method: "post", method: "post",
params data
}) })
}, },
// 上传文件夹 // 上传文件夹

View File

@ -1490,6 +1490,9 @@ export default {
this.path = '' this.path = ''
} }
if (fileDoc) { if (fileDoc) {
if (this.$store.state.uploaderState) {
return
}
if (fileDoc.$set) { if (fileDoc.$set) {
let path = fileDoc.$set.path let path = fileDoc.$set.path
path = path.replace(/\\/g, '/') path = path.replace(/\\/g, '/')

View File

@ -17,7 +17,7 @@
> >
<uploader-unsupport></uploader-unsupport> <uploader-unsupport></uploader-unsupport>
<uploader-drop v-if="dragover && enableDragUplaod" class="uploader-drop"> <uploader-drop v-if="dragover && enableDragUpload" class="uploader-drop">
<span>上传文件到当前目录下</span> <span>上传文件到当前目录下</span>
</uploader-drop> </uploader-drop>
@ -190,7 +190,7 @@ export default {
fileListScrollTop: 0, fileListScrollTop: 0,
dragoverLoop: null, dragoverLoop: null,
successMsg: null, successMsg: null,
enableDragUplaod: false,// 是否启用拖拽上传 enableDragUpload: false,// 是否启用拖拽上传
uploader: null, uploader: null,
} }
}, },
@ -200,7 +200,7 @@ export default {
watch: { watch: {
$route(route) { $route(route) {
// 只有首页才启用拖拽上传 // 只有首页才启用拖拽上传
this.enableDragUplaod = route.path === '/' this.enableDragUpload = route.path === '/'
}, },
message(msg) { message(msg) {
switch (msg.event) { switch (msg.event) {
@ -234,12 +234,12 @@ export default {
} }
}, },
mounted() { mounted() {
this.enableDragUplaod = this.$route.path === '/' this.enableDragUpload = this.$route.path === '/'
let that = this let that = this
let dropbox = document.body let dropbox = document.body
document.body.ondragstart = function (e) { document.body.ondragstart = function (e) {
if (that.enableDragUplaod) { if (that.enableDragUpload) {
if (e.target.slot === 'jmal') { if (e.target.slot === 'jmal') {
that.isDragStart = true that.isDragStart = true
} }
@ -357,6 +357,10 @@ export default {
this.doUploadBefore(files) this.doUploadBefore(files)
} }
}, },
displayPanel(display) {
this.panelShow = display
this.$store.dispatch('updateUploaderState', display)
},
doUploadBefore(files) { doUploadBefore(files) {
this.fileListLength = this.uploader.fileList.length this.fileListLength = this.uploader.fileList.length
const filePaths = this.uploader.filePaths const filePaths = this.uploader.filePaths
@ -382,7 +386,7 @@ export default {
} }
if (window.pc) { if (window.pc) {
this.pc = true this.pc = true
this.panelShow = true this.displayPanel(true)
} else { } else {
this.pc = false this.pc = false
this.shrink() this.shrink()
@ -490,7 +494,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.uploader.cancel()
this.panelShow = false this.displayPanel(false)
} }
}, },
onFileError(rootFile, file, response) { onFileError(rootFile, file, response) {
@ -641,7 +645,7 @@ 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.uploader.cancel()
this.panelShow = false this.displayPanel(false)
} else { } else {
this.$confirm('还有文件正在上传, 确定要关闭吗?', '提示', { this.$confirm('还有文件正在上传, 确定要关闭吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
@ -649,7 +653,7 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.uploader.cancel() this.uploader.cancel()
this.panelShow = false this.displayPanel(false)
}) })
} }
}, },

View File

@ -16,16 +16,23 @@ const store = new Vuex.Store({
getters, getters,
state: { state: {
message: null, message: null,
uploaderState: null,
}, },
mutations: { mutations: {
setMessage(state, message) { setMessage(state, message) {
state.message = message; state.message = message;
}, },
setUploaderState(state, uploaderState) {
state.uploaderState = uploaderState;
},
}, },
actions: { actions: {
updateMessage({ commit }, message) { updateMessage({ commit }, message) {
commit('setMessage', message); commit('setMessage', message);
}, },
updateUploaderState({ commit }, uploaderState) {
commit('setUploaderState', uploaderState);
},
} }
}) })