naive-ui-upload文档

介绍

naive-ui-upload是基于naive-ui的n-upload封装的一个文件上传组件。支持图片裁剪功能。

安装

pnpm add naive-ui-upload

也可以使用npm、yarn等安装。

使用

局部导入

<template>
  <NConfigProvider :locale="zhCN" :date-locale="dateZhCN">
    <NMessageProvider>
      <NaiveUiUpload
        v-model:value="fileList"
        list-type="image-card"
        :requestFunc="handleUpload"
      ></NaiveUiUpload>
    </NMessageProvider>
  </NConfigProvider>
</template>

<script setup lang="ts">
import { NConfigProvider, zhCN, dateZhCN, NMessageProvider } from 'naive-ui'
import { NaiveUiUpload, type FileInfo } from 'naive-ui-upload'
import { ref } from 'vue'

const fileList = ref<FileInfo[]>([])
function handleUpload() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('https://picsum.photos/200/300')
    }, 1000)
  })
}
</script>

<style scoped></style>

FileInfo类型是n-upload的UploadFileInfo的简化：

interface FileInfo {
  name: string
  url: string
  status?: string
  id?: string
}

全局导入

import { createApp } from 'vue'
import NaiveUiUpload from 'naive-ui-upload'

const app = createApp(App)
app.use(NaiveUiUpload, {
  requestFunc() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('https://picsum.photos/200/300')
      }, 1000)
    })
  }
})

props

字段	类型	描述	必传	默认值
requestFunc	Function，见下方说明	上传文件的方法	否	-
v-model:value	FileInfo[]	文件列表，需要双向绑定	是
size	number	单个文件上传的限制大小（单位：M）	否
cropper	Objec，具体参数见vue-cropper	是否需要裁剪（设置该值时确保上传的是图片格式的文件）	否
showInfo	boolean	是否显示提示信息	否	是
uploadText	string	默认插槽按钮文字	否	上传文件

此外，还可以传入n-upload的大部分props。

requestFunc字段定义类型如下：

type RequestFun = (file: File, onProgerss?: (e: { percent: number }) => void) => Promise<string>

可以在全局注册传入requestFunc，也可在naive-ui-upload的props传入。props优先级最高。

app.use(NaiveUiUpload, {
  requestFunc: xxx
})

也可以通过provide注入：

import { provideKey } from 'naive-ui-upload'
app.provide(provideKey, function)

提示

如果没有找到requestFunc，naive-ui-upload会报错