Upload 上传

accept 文件类型

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept

规则

{
    type: "upload",
    field: "pic",
    title: "轮播图",
    value: [
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg',
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
        ],
    props: {
        action: "/upload.php",
        max: 2,
        onSuccess:function (res, file) {
            file.url = res.url;
        }
    },
}

{
    type: "upload",
    field: "pic",
    title: "轮播图",
    value: [
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg',
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
        ],
    props: {
        action: "/upload.php",
        max: 2,
        onSuccess:function (res, file) {
            file.url = res.url;
        }
    },
}

参考:naive-ui_Upload

value :Array | String

注意

文件上传成功后需要通过 onSuccess 回调, 将接口返回内容中的 url 赋值给 file.url.否则表单获取不到组件的数据

Props

名称	类型	默认值	说明	版本
onSuccess	`Function`	`undefined`	文件上传成功后回调
abstract	`boolean`	`false`	是否不存在 DOM 包裹，不支持 `image-card` 类型的 Upload
accept	`string`	`undefined`	接受的文件类型，参考 accept
action	`string`	`undefined`	请求提交的地址
create-thumbnail-url	`(file: File) => Promise<string>`	`undefined`	自定义文件缩略图
custom-request	`(options: UploadCustomRequestOptions) => void`	`undefined`	自定义上传方法，类型参考 UploadCustomRequestOptions
data	`Object \| ({ file: UploadFileInfo }) => Object`	`undefined`	提交表单需要附加的数据
default-file-list	`Array<UploadFileInfo>`	`[]`	非受控状态下默认的文件列表
default-upload	`boolean`	`true`	选择文件时候是否默认上传
disabled	`boolean`	`false`	是否禁用
file-list-style	`Object`	`undefined`	文件列表区域的样式
file-list	`Array<UploadFileInfo>`	`undefined`	文件列表，如果传入组件会处于受控状态
headers	`Object \| ({ file: UploadFileInfo }) => Object`	`undefined`	HTTP 请求需要附加的 Headers
image-group-props	`ImageGroupProps`	`undefined`	Upload 中预览图片组件的属性，参考 ImageGroup Props	2.24.0
input-props	`Object`	`undefined`	file input 元素的属性	2.24.2
list-type	`string`	`'text'`	文件列表的内建样式，`text`、`image` 和 `image-card`
max	`number`	`undefined`	限制上传文件数量
method	`string`	`'POST'`	HTTP 请求的方法
multiple	`boolean`	`false`	是否支持多个文件
name	`string`	`'file'`	文件在提交表单中的字段名
show-cancel-button	`boolean`	`true`	是否显示取消按钮（在 pending、uploading、error 的时候展示），点击取消按钮会触发 `on-remove` 回调
show-download-button	`boolean`	`false`	是否显示下载按钮（在 finished 后展示）
show-remove-button	`boolean`	`true`	是否显示删除按钮（在 finished 后时候展示），点击删除按钮会触发 `on-remove` 回调
show-retry-button	`boolean`	`true`	是否显示重新上传按钮（在 error 时展示）
show-file-list	`boolean`	`true`	是否显示文件列表
show-preview-button	`boolean`	`true`	是否允许显示预览按钮（在 `list-type` 为 `image-card` 时生效）
show-trigger	`boolean`	`true`	是否显示触发元素	2.21.5
with-credentials	`boolean`	`false`	是否携带 Cookie
on-change	`(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo>, event?: Event }) => void` \| `() => {}`	组件状态变化的回调，组件的任何文件状态变化都会触发回调
on-error	`(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo \| void` \| `undefined`	文件上传失败的回调	2.24.0
on-finish	`(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo \| void` \| `({ file }) => file`	文件上传结束的回调，可以修改传入的 UploadFileInfo 或者返回一个新的 UploadFileInfo。注意：file 将会下一次事件循环中被置为 null
on-before-upload	`(options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => (Promise<boolean \| void> \| boolean \| void)`	`undefined`	文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传
on-download	`(file: FileInfo) => void`	`undefined`	点击文件下载按钮的回调函数
on-preview	`(file: FileInfo) => void`	`undefined`	点击文件链接或预览按钮的回调函数
on-remove	`(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo> }) => Promise<boolean> \| boolean \| any` \| `() => true`	文件删除回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次删除
on-update:file-list	`(fileList: UploadFileInfo[]) => void`	`undefined`	当 file-list 改变时触发的回调函数

Upload 上传 ​

规则 ​

Props ​

Upload 上传

规则

Props