naive-ui icon indicating copy to clipboard operation
naive-ui copied to clipboard

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

Open yh284914425 opened this issue 4 months ago • 4 comments

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 不是给所有文件设置了统一的缩略图了吗,但是为什么就图片生效了,其他类型的文件不生效,如下图 image

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

yh284914425 avatar Mar 31 '24 08:03 yh284914425