naive-ui
naive-ui copied to clipboard
上传组件除了图片类型,其他类型缩略图都不生效
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.