Appearance

Return to top
On this page

Upload 上传

在控制台可查看上传文件变化时的文件数组

基本使用

vue
<template>
  <n-upload @getFilesList="getFilesList">
    <n-button type="primary" size="small">文件上传</n-button>
  </n-upload>
</template>

<script setup lang="ts">
const getFilesList = (files: File[]) => {
  console.log(files);
};
</script>

多选文件

vue
<template>
  <n-upload @getFilesList="getFilesList" multiple>
    <n-button type="primary" size="small">文件上传</n-button>
  </n-upload>
</template>

<script setup lang="ts">
const getFilesList = (files: File[]) => {
  console.log(files);
};
</script>

指定文件类型

vue
<template>
  <n-upload @getFilesList="getFilesList" accept="image/*">
    <n-button type="primary" size="small">文件上传</n-button>
  </n-upload>
</template>

<script setup lang="ts">
const getFilesList = (files: File[]) => {
  console.log(files);
};
</script>

拖拽上传

将文件拖到此处或点击上传
vue
<template>
  <n-upload @getFilesList="getFilesList" drag>
    <n-button type="primary" size="small">文件上传</n-button>
  </n-upload>
</template>

<script setup lang="ts">
const getFilesList = (files: File[]) => {
  console.log(files);
};
</script>

API

参数说明类型可选值默认值
multiple是否可以多选boolean——false
accept可以选择的文件 MIME 类型，多个 MIME 类型用英文逗号分开string见 MDN——
drag是否是拖拽上传boolean——false

Events

事件名称说明回调参数
getFilesList文件列表改变时触发新的文件列表