import{c as t,o as d,C as e}from"./vendor.ed841bd5.js";const r={class:"markdown-body"},o=e('

Uploader 上传

介绍

用于将本地的图片或文件上传至服务器。

安装

import { createApp } from 'vue';\nimport { Uploader } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Uploader);\n\n

代码示例

基本用法

<nut-uploader url="http://服务器地址"></nut-uploader>\n

自定义上传样式

<nut-uploader url="http://服务器地址">\n  <nut-button type="primary" icon="uploader">上传文件</nut-button>\n</nut-uploader>\n

直接调起摄像头（移动端生效）

<nut-uploader url="http://服务器地址" capture></nut-uploader>\n

限制上传数量5个

<nut-uploader url="http://服务器地址" multiple maximum="5"></nut-uploader>\n

限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理）

<nut-uploader url="http://服务器地址" multiple :maximize="1024 * 50" :before-upload="beforeUpload" @oversize="onOversize"></nut-uploader>\n

setup() {\n    const formData = {\n      custom: 'test'\n    };\n    const onOversize = (files: File[]) => {\n      console.log('oversize 触发 文件大小不能超过 50kb', files);\n    };\n\n    const beforeUpload = (files: File[]) => {\n      //自定义处理\n      return files;\n    }\n   \n    return {\n      onOversize,\n      formData\n    };\n}\n

自定义 FormData headers

<nut-uploader url="http://服务器地址" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>\n

setup() {\n    const formData = {\n      custom: 'test'\n    };\n    const onOversize = (files: File[]) => {\n      console.log('oversize 触发 文件大小不能超过 50kb', files);\n    };\n   \n    return {\n      onOversize,\n      formData\n    };\n}\n

禁用状态

<nut-uploader disabled></nut-uploader>\n

API

Prop

字段	说明	类型	默认值
name	`input` 标签 `name` 的名称，发到后台的文件参数名	String	“file”
url	上传服务器的接口地址	String	-
v-model:file-list	默认已经上传的文件列表	FileItem[]	[]
is-preview	是否上传成功后展示预览图	Boolean	true
is-deletable	是否展示删除按钮	Boolean	true
method	上传请求的 http method	String	“post”
capture	图片选取模式，直接调起摄像头	String	false
maximize	可以设定最大上传文件的大小（字节）	Number丨String	Number.MAX_VALUE
maximum	文件上传数量限制	Number丨String	1
clear-input	是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件	Boolean	false
accept	允许上传的文件类型，详细说明	String	*
headers	设置上传的请求头部	Object	{}
data	附加上传的信息 formData	Object	{}
upload-icon	上传区域图标名称或图片链接	String	“photograph”
xhr-state	接口响应的成功状态（status）值	Number	200
with-credentials	支持发送 cookie 凭证信息	Boolean	fasle
multiple	是否支持文件多选	Boolean	fasle
disabled	是否禁用文件上传	Boolean	fasle
timeout	超时时间，单位为毫秒	Number丨String	1000 * 30
before-upload	上传前的函数需要返回一个`Promise`对象	Function	null
before-delete	除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除	Function(file): boolean 丨Promise	-

FileItem

名称	说明	默认值
status	文件状态值，可选’ready,uploading,success,error,removed’	“ready”
uid	文件的唯一标识	new Date().getTime().toString()
name	文件名称	“”
url	文件路径	“”
type	文件类型	“image/jpeg”
formData	上传所需的data	new FormData()

Event

名称	说明	回调参数
start	文件上传开始	options
progress	文件上传的进度	event,options
oversize	文件大小超过限制时触发	files
success	上传成功	responseText,options
failure	上传失败	responseText,options
change	上传文件改变时的状态	fileList,event
delete	文件删除之前的状态	files,fileList

',29),a={expose:[],setup:e=>(e,a)=>(d(),t("div",r,[o]))};export default a;