提交

web-admin/src/components/ImageUpload/index.vue

@@ -60,10 +60,12 @@ const emit = defineEmits<{
 }>()
 
 const fileList = ref<UploadFile[]>([])
+/** 本地 URL 列表，避免多文件并行上传完成时基于 stale props 互相覆盖 */
+const localUrls = ref<string[]>([])
 
 const isDirectUrl = (value: string) => /^https?:\/\//i.test(value)
 
-const displayItems = computed(() => parseValue(props.modelValue))
+const displayItems = computed(() => localUrls.value)
 
 const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','))
 
@@ -83,7 +85,7 @@ function listToString(items: string[]) {
 }
 
 function syncFileListFromModel() {
-  fileList.value = displayItems.value.map((url, index) => ({
+  fileList.value = localUrls.value.map((url, index) => ({
     name: url.split('/').pop() || `file-${index + 1}`,
     url,
     status: 'success'
@@ -92,7 +94,8 @@ function syncFileListFromModel() {
 
 watch(
   () => props.modelValue,
-  () => {
+  (value) => {
+    localUrls.value = parseValue(value)
     if (props.disabled) return
     syncFileListFromModel()
   },
@@ -124,7 +127,8 @@ async function handleUploadRequest(options: UploadRequestOptions) {
     if (!fileUrl) {
       throw new Error('上传失败')
     }
-    const next = [...displayItems.value, fileUrl]
+    const next = [...localUrls.value, fileUrl]
+    localUrls.value = next
     emit('update:modelValue', listToString(next))
     options.onSuccess?.(res)
   } catch (error: any) {
@@ -136,7 +140,8 @@ async function handleUploadRequest(options: UploadRequestOptions) {
 function handleRemove(uploadFile: UploadFile) {
   const removedUrl = uploadFile.url || (uploadFile.response as { fileUrl?: string })?.fileUrl
   if (!removedUrl) return
-  const next = displayItems.value.filter((url) => url !== removedUrl)
+  const next = localUrls.value.filter((url) => url !== removedUrl)
+  localUrls.value = next
   emit('update:modelValue', listToString(next))
 }