• Encapsulated based on NUpload

Type Definitions

Type for bound file list

/**
 * File list type
 * @property name File name
 * @property url File path
 */
interface FileInfo {
  /** File name */
  name: string;
  /** File path */
  url: string;
}

Type for removed file

/**
 * Removed file type
 * @property idx File index
 * @property name File name
 * @property url File path
 */
interface RemoveFile {
  /** File name */
  name: string;
  /** File path */
  url: string;
  /** File index */
  idx: number;
}

Basic Usage

Single file upload

<template>
  <UploadFile
    :value="imgUrl"
    :limit="1"
    @upload="(val) => (imgUrl = val.url)"
    @remove="imgUrl = ''"
  />
</template>

<script setup lang="ts">
const imgUrl = ref<string>(""); // Image URL, string type
</script>

Multiple file upload

<template>
  <UploadFile
    :value="imgUrls"
    @upload="(val) => imgUrls.push(val.url)"
    @remove="
      (val) => {
        if (imgUrls[idx] === val.url) {
          imgUrls.splice(idx, 1);
        }
      }
    "
  />
</template>

<script setup lang="ts">
const imgUrls = ref<string[]>([]); // Image URLs, array type
</script>

💡 Tip

This is just a common usage. For more, see example

Props

Name	Type	Required	Default	Description
value	string[] string FileInfo[] FileInfo	No	[]	File list
data	Object	No	{}	Data to be attached to the form submission
name	String	No	file	Parameter name for uploaded file
limit	Number	No	10	File upload quantity limit
max-file-size	Number	No	10	Maximum allowed size for a single file
accept	String	No	image/*	Allowed file types, see accept
type	NUpload[list-type]	No	image-card	Built-in style for file list
multiple	Boolean	No	true	Whether to support multiple selection, invalid when limit is 1
drag	Boolean	No	false	Whether to support drag upload
drag-options	DragOptions	No	DragOptions	Drag upload configuration, only valid when drag is true
Others	Upload-Props	No		NUpload component props

DragOptions

Name	Type	Default	Description
icon	String	ep:upload-filled	Icon
iconSize	Number	50	Icon size
title	String	Click here or drag files to this area to upload	Title

Slots

Name	Params	Description
default	()	Default slot, trigger, etc.

Events

Name	Type	Description
upload	(val: FileInfo) => val	Callback for successful file upload
remove	(val: RemoveFile) => val	Callback for file removal

Contributors

nuyoah

Changelog

Last edited 5 months ago

View full history

deac87e-docs(en/upload-file): Optimize the type description of the value attribute

b4eb45c-docs(en): Add a trailing blank line

a2e0f34-docs(en): Add UploadFile component documentation