feat(upload): 优化文件上传组件逻辑
- 在删除文件时,将删除的文件信息存储到本地存储中 - 在选择文件时,检查本地存储中是否有删除的文件信息,并从选择的文件中移除 - 优化了文件上传流程,提高了用户体验
This commit is contained in:
@@ -426,6 +426,7 @@ const handleDelete = (row, type) => {
|
|||||||
allFileList.value.splice(allFileList.value.findIndex((item) => item.fileId === row.fileId), 1);
|
allFileList.value.splice(allFileList.value.findIndex((item) => item.fileId === row.fileId), 1);
|
||||||
isHaveOneFile.value = !(allFileList.value && allFileList.value?.length == 0);
|
isHaveOneFile.value = !(allFileList.value && allFileList.value?.length == 0);
|
||||||
console.log('allFileList.value',allFileList.value)
|
console.log('allFileList.value',allFileList.value)
|
||||||
|
localStorage.setItem('deleteFileRow', JSON.stringify(row))
|
||||||
if (localStorage.getItem('collectData')) {
|
if (localStorage.getItem('collectData')) {
|
||||||
let collectData = JSON.parse(localStorage.getItem('collectData'))
|
let collectData = JSON.parse(localStorage.getItem('collectData'))
|
||||||
collectData.fileList = allFileList.value
|
collectData.fileList = allFileList.value
|
||||||
@@ -462,6 +463,7 @@ const getOtherFile = (val) => {
|
|||||||
} else {
|
} else {
|
||||||
allFileList.value = _otherFileListValue.value
|
allFileList.value = _otherFileListValue.value
|
||||||
}
|
}
|
||||||
|
|
||||||
isHaveOneFile.value = true
|
isHaveOneFile.value = true
|
||||||
emit('getOtherFile', val)
|
emit('getOtherFile', val)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,11 +10,11 @@
|
|||||||
:show-file-list="showFileList"
|
:show-file-list="showFileList"
|
||||||
:auto-upload="false"
|
:auto-upload="false"
|
||||||
:before-upload="beforeUpload"
|
:before-upload="beforeUpload"
|
||||||
:on-success="handleUploadSuccess"
|
|
||||||
:on-error="uploadError"
|
:on-error="uploadError"
|
||||||
:before-remove="beforeRemove"
|
:before-remove="beforeRemove"
|
||||||
:on-remove="handleRemove"
|
:on-remove="handleRemove"
|
||||||
>
|
>
|
||||||
|
<!-- :on-success="handleUploadSuccess"-->
|
||||||
<el-button color="#DED0B2" :loading="loading" :disabled="disabled">上传文件</el-button>
|
<el-button color="#DED0B2" :loading="loading" :disabled="disabled">上传文件</el-button>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
</template>
|
</template>
|
||||||
@@ -61,7 +61,7 @@ const props = defineProps({
|
|||||||
})
|
})
|
||||||
const uploadRef = ref(null); // el-upload 的 ref
|
const uploadRef = ref(null); // el-upload 的 ref
|
||||||
const uploadPromises = ref([]); // 跟踪每个文件的上传状态
|
const uploadPromises = ref([]); // 跟踪每个文件的上传状态
|
||||||
const emit = defineEmits(["input", "beforeUpload","getFile", "delete"])
|
const emit = defineEmits(["input", "beforeUpload", "getFile", "delete"])
|
||||||
const fileList = ref([])
|
const fileList = ref([])
|
||||||
const _value = computed({
|
const _value = computed({
|
||||||
get() {
|
get() {
|
||||||
@@ -87,14 +87,29 @@ const handleRemove = (file) => {
|
|||||||
|
|
||||||
// 文件选择变化时触发
|
// 文件选择变化时触发
|
||||||
const handleChange = (file, files) => {
|
const handleChange = (file, files) => {
|
||||||
console.log(file, files,'files')
|
const deleteFileRow = JSON.parse(localStorage.getItem('deleteFileRow'));
|
||||||
|
console.log("🚀 ~ file:deleteFileRow ", deleteFileRow, uploadFile.value)
|
||||||
|
let deleteIndex = null
|
||||||
|
if (deleteFileRow) {
|
||||||
|
deleteIndex = uploadFile.value.findIndex((item) => item.name === deleteFileRow.originalFileName && item.size === deleteFileRow.size)
|
||||||
|
console.log("🚀 ~ file:deleteIndex ", deleteIndex)
|
||||||
|
|
||||||
|
if (deleteIndex != -1) {
|
||||||
|
uploadFile.value.splice(deleteIndex, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
console.log(file, files, 'files')
|
||||||
uploadIndex.value++
|
uploadIndex.value++
|
||||||
uploadFile.value.push(file)
|
uploadFile.value.push(file)
|
||||||
|
console.log("🚀 ~ file:uploadFile.value ", uploadFile.value)
|
||||||
|
localStorage.removeItem('deleteFileRow')
|
||||||
};
|
};
|
||||||
watch(() => uploadIndex.value, (newVal) => {
|
watch(() => uploadIndex.value, (newVal) => {
|
||||||
console.log('newVal',newVal)
|
console.log('newVal', newVal)
|
||||||
startUpload(uploadFile.value); // 自动触发上传
|
startUpload(uploadFile.value); // 自动触发上传
|
||||||
},{
|
}, {
|
||||||
deep: true
|
deep: true
|
||||||
})
|
})
|
||||||
// 自定义上传逻辑
|
// 自定义上传逻辑
|
||||||
@@ -117,7 +132,7 @@ const customUpload = async (options) => {
|
|||||||
|
|
||||||
// 触发所有文件上传
|
// 触发所有文件上传
|
||||||
const startUpload = (files) => {
|
const startUpload = (files) => {
|
||||||
uploadLoading.value= ElLoading.service({
|
uploadLoading.value = ElLoading.service({
|
||||||
fullscreen: true,
|
fullscreen: true,
|
||||||
text: '文件上传中...',
|
text: '文件上传中...',
|
||||||
})
|
})
|
||||||
@@ -144,9 +159,10 @@ const startUpload = (files) => {
|
|||||||
})
|
})
|
||||||
files = []; // 清空文件列表
|
files = []; // 清空文件列表
|
||||||
uploadRef.value.clearFiles(); // 清空上传组件
|
uploadRef.value.clearFiles(); // 清空上传组件
|
||||||
|
uploadFile.value = [] // 清空文件列表
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
uploadLoading.value.close()
|
uploadLoading.value.close()
|
||||||
uploadLoading.value=null
|
uploadLoading.value = null
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -157,6 +173,7 @@ const beforeUpload = () => {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
const handleUploadSuccess = (res) => {
|
const handleUploadSuccess = (res) => {
|
||||||
|
|
||||||
ElNotification({
|
ElNotification({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
message: res.code === 1000 ? '上传成功' : '上传失败',
|
message: res.code === 1000 ? '上传成功' : '上传失败',
|
||||||
@@ -166,7 +183,7 @@ const handleUploadSuccess = (res) => {
|
|||||||
showTable.value = true
|
showTable.value = true
|
||||||
let data = res.data
|
let data = res.data
|
||||||
fileList.value.push(data)
|
fileList.value.push(data)
|
||||||
emit("getFile", res.data)
|
// emit("getFile", res.data)
|
||||||
}
|
}
|
||||||
const uploadError = () => {
|
const uploadError = () => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|||||||
Reference in New Issue
Block a user