fix: 回显问题

This commit is contained in:
2023-08-16 18:59:29 +08:00
parent a4a64f0fd6
commit 9d206a0b46

View File

@ -2,13 +2,13 @@
* @Author: zhaojinfeng 121016171@qq.com * @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-08-16 17:33:41 * @Date: 2023-08-16 17:33:41
* @LastEditors: zhaojinfeng 121016171@qq.com * @LastEditors: zhaojinfeng 121016171@qq.com
* @LastEditTime: 2023-08-16 18:32:13 * @LastEditTime: 2023-08-16 18:58:09
* @FilePath: \vue3\packages\upload-list\index.vue * @FilePath: \vue3\packages\upload-list\index.vue
* @Description: * @Description:
* *
--> -->
<template> <template>
<el-upload v-model:file-list="value" :accept="accept" :disabled="disabled" :http-request="httpRequest"> <el-upload v-model:file-list="userFiles" :accept="accept" :disabled="disabled" :http-request="httpRequest">
<el-button type="primary" plain> <el-button type="primary" plain>
点击上传 点击上传
</el-button> </el-button>
@ -39,7 +39,7 @@ const emit = defineEmits<{
(event: 'update:fileList', file: FileVO[]): void (event: 'update:fileList', file: FileVO[]): void
}>() }>()
let value = $ref<UploadUserFile[]>([]) const userFiles = ref<UploadUserFile[]>([])
async function httpRequest({ file, onProgress, onSuccess, onError }: UploadRequestOptions) { async function httpRequest({ file, onProgress, onSuccess, onError }: UploadRequestOptions) {
const formData = new FormData() const formData = new FormData()
@ -58,16 +58,20 @@ async function httpRequest({ file, onProgress, onSuccess, onError }: UploadReque
} }
} }
function init() { userFiles.value = props.fileList.map(file => ({
if (value.length === 0) { name: file.name!,
value = props.fileList.map(file => ({ url: file.url,
name: file.name!, status: 'success',
url: file.url, percentage: 100,
status: 'success', uid: file.id,
})) }))
}
}
init()
watch(() => props.fileList, init) watch(() => userFiles, (files) => {
emit('update:fileList', files.value.map(file => ({
name: file.name!,
url: file.url,
status: 'success',
percentage: 100,
})))
})
</script> </script>