【Vue3】【Naive UI】＜n-upload＞标签

【VUE3】【Naive UI】＜NCard＞ 标签
【VUE3】【Naive UI】＜n-button＞ 标签
【VUE3】【Naive UI】＜a＞ 标签
【VUE3】【Naive UI】＜NDropdown＞ 标签
【VUE3】【Naive UI】＜n-upload＞标签
【VUE3】【Naive UI】＜n-message＞标签

<n-upload> 是 Naive UI 库中的一个组件，用于处理文件上传。
它提供了多种属性（props）和事件来帮助开发者定制文件上传的行为。
下面将详细介绍 <n-upload> 的主要属性，并为每个属性提供示例代码。

基本设置

• v-model:file-list (FileItem[]): 双向绑定的文件列表。

<template>
  <n-upload v-model:file-list="fileList" :action="uploadUrl">
    <n-button>点击上传</n-button>
  </n-upload>
</template>

<script setup>
import { ref } from 'vue';
import { NUpload, NButton } from 'naive-ui';

const fileList = ref([]);
const uploadUrl = 'https://your-api-endpoint.com/upload';
</script>

• action (string | (file: File) => Promise): 上传文件的目标 URL 或者一个返回 Promise 的函数。

<n-upload :action="uploadUrl" />

或者使用函数形式：

<n-upload :action="handleUpload" />

<script setup>
async function handleUpload(file) {
  // 自定义上传逻辑
  return fetch('https://your-api-endpoint.com/upload', {
    method: 'POST',
    body: file,
  });
}
</script>

• multiple (boolean): 是否支持多文件选择，默认为 false。

<n-upload multiple :action="uploadUrl" />

• accept (string): 允许上传的文件类型，例如 image/*, .pdf。

<n-upload accept="image/*, .pdf" :action="uploadUrl" />

• list-type (‘text’ | ‘picture-card’ | ‘picture’): 文件列表的显示类型。

<n-upload list-type="picture-card" :action="uploadUrl" />

• max (number): 最大允许上传的文件数量

<n-upload :max="3" :action="uploadUrl" />

• on-change ((fileList: FileItem[], file: FileItem, event: Event) => void): 当文件列表发生变化时触发

<n-upload :action="uploadUrl" @change="handleChange" />

<script setup>
function handleChange(fileList, file, event) {
  console.log('文件列表变化:', fileList);
}
</script>

• before-upload ((file: File) => boolean | Promise): 在文件上传前调用的钩子函数，可以用来验证文件或取消上传。

<n-upload :action="uploadUrl" :before-upload="validateFile" />

<script setup>
function validateFile(file) {
  if (file.size > 2 * 1024 * 1024) {
    alert('文件大小不能超过2MB');
    return false;
  }
  return true;
}
</script>

• on-remove ((file: FileItem, fileList: FileItem[]) => void): 当文件从列表中移除时触发。

<n-upload :action="uploadUrl" @remove="handleRemove" />

<script setup>
function handleRemove(file, fileList) {
  console.log('移除文件:', file);
}
</script>

• on-error ((error: any, file: FileItem, fileList: FileItem[]) => void): 当上传出错时触发。

<n-upload :action="uploadUrl" @error="handleError" />

<script setup>
function handleError(error, file, fileList) {
  console.error('上传错误:', error);
}
</script>

• on-success ((response: any, file: FileItem, fileList: FileItem[]) => void): 当文件成功上传时触发。

<n-upload :action="uploadUrl" @success="handleSuccess" />

<script setup>
function handleSuccess(response, file, fileList) {
  console.log('上传成功:', response);
}
</script>

• show-download-button (boolean): 是否显示下载按钮。

<n-upload show-download-button :action="uploadUrl" />

• custom-request ((options: UploadCustomRequestOptions) => void): 自定义上传请求。

<n-upload :action="uploadUrl" :custom-request="handleCustomRequest" />

<script setup>
function handleCustomRequest(options) {
  const formData = new FormData();
  formData.append('file', options.file.file);
  // 发送自定义请求
  fetch('https://your-api-endpoint.com/upload', {
    method: 'POST',
    body: formData,
  }).then(response => {
    options.onSuccess(response, options.file);
  }).catch(error => {
    options.onError(error);
  });
}
</script>

• data (Record<string, any>): 附加到上传请求的数据。

<n-upload :action="uploadUrl" :data="{ userId: 123 }" />

• headers (Record<string, string>): 上传请求的额外头部信息。

<n-upload :action="uploadUrl" :headers="{ 'X-Custom-Header': 'value' }" />

以上就是 组件的一些主要属性及其示例。通过这些属性，你可以灵活地控制文件上传的行为、样式和交互方式。