上传组件除了图片类型，其他类型缩略图都不生效

[yh284914425]

Describe the bug

<template>
  <n-upload
    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
    :default-file-list="fileList"
    list-type="image"
    :create-thumbnail-url="createThumbnailUrl"
  >
    <n-button>上传文件</n-button>
  </n-upload>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import type { UploadFileInfo } from 'naive-ui'

export default defineComponent({
  setup () {
    const message = useMessage()
    const fileListRef = ref<UploadFileInfo[]>([
      {
        id: 'a',
        name: '我错了.png',
        status: 'error'
      },
      {
        id: 'b',
        name: '普通文本.doc',
        status: 'finished',
        type: 'text/plain'
      },
      {
        id: 'c',
        name: '图片.png',
        status: 'finished',
        url: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
      },
      {
        id: 'd',
        name: '没传完.doc',
        status: 'uploading',
        percentage: 50
      }
    ])
    return {
      fileList: fileListRef,
      createThumbnailUrl (file: File | null): Promise<string> | undefined {
        if (!file) return undefined
        message.info(
          'createThumbnailUrl 产生了图片的 URL，你传什么都会变成 07akioni'
        )
        message.info(`${file.name}`)
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(
              'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
            )
          }, 1000)
        })
      }
    }
  }
})
</script>

createThumbnailUrl 不是给所有文件设置了统一的缩略图了吗，但是为什么就图片生效了，其他类型的文件不生效，如下图

Steps to reproduce

1、设置:create-thumbnail-url="createThumbnailUrl" 2、上传图片类型文件和其他类型文件

Link to minimal reproduction

https://www.naiveui.com/zh-CN/os-theme/components/upload

System Info

win11 node20.6

Used Package Manager

pnpm

Validations

• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[jizai1125]

if (!file) return undefined

createThumbnailUrl 如果返回了 undefined，会使用默认的缩略图展示逻辑（取 fileInfo url 做为缩略图）

[Vike50]

if (!file) return undefined

createThumbnailUrl 如果返回了 undefined，会使用默认的缩略图展示逻辑（取 fileInfo url 做为缩略图）

我也遇到了，我觉得提问者的意思是上传其他类型的文件不会进入这个方法，只有上传图片类型的会进入createThumbnailUrl方法。 但很奇怪，我看源码没有区分类型。

 function getFileThumbnailUrlResolver (
      file: UploadSettledFileInfo
    ): Promise<string> | string {
      if (file.thumbnailUrl) return file.thumbnailUrl
      const { createThumbnailUrl } = props
      if (createThumbnailUrl) {
        return createThumbnailUrl(file.file, file) ?? (file.url || '')
      }
      if (file.url) {
        return file.url
      } else if (file.file) {
        return createImageDataUrl(file.file)
      }
      return ''
    }

[Vike50]

if (!file) return undefined

createThumbnailUrl 如果返回了 undefined，会使用默认的缩略图展示逻辑（取 fileInfo url 做为缩略图）

我也遇到了，我觉得提问者的意思是上传其他类型的文件不会进入这个方法，只有上传图片类型的会进入createThumbnailUrl方法。 但很奇怪，我看源码没有区分类型。

 function getFileThumbnailUrlResolver (
      file: UploadSettledFileInfo
    ): Promise<string> | string {
      if (file.thumbnailUrl) return file.thumbnailUrl
      const { createThumbnailUrl } = props
      if (createThumbnailUrl) {
        return createThumbnailUrl(file.file, file) ?? (file.url || '')
      }
      if (file.url) {
        return file.url
      } else if (file.file) {
        return createImageDataUrl(file.file)
      }
      return ''
    }

有没有缩略图跟类型没有关系

我找到原因了，是没有加should-use-thumbnail-url参数，加了就可以区分类型使用createThumbnailUrl函数

[jizai1125]

if (!file) return undefined

createThumbnailUrl 如果返回了 undefined，会使用默认的缩略图展示逻辑（取 fileInfo url 做为缩略图）

我也遇到了，我觉得提问者的意思是上传其他类型的文件不会进入这个方法，只有上传图片类型的会进入createThumbnailUrl方法。 但很奇怪，我看源码没有区分类型。

 function getFileThumbnailUrlResolver (
      file: UploadSettledFileInfo
    ): Promise<string> | string {
      if (file.thumbnailUrl) return file.thumbnailUrl
      const { createThumbnailUrl } = props
      if (createThumbnailUrl) {
        return createThumbnailUrl(file.file, file) ?? (file.url || '')
      }
      if (file.url) {
        return file.url
      } else if (file.file) {
        return createImageDataUrl(file.file)
      }
      return ''
    }

有没有缩略图跟类型没有关系

我找到原因了，是没有加should-use-thumbnail-url参数，加了就可以区分类型使用createThumbnailUrl函数

确实是这样，理解错了

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem