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",
        limit: 2,
            onSuccess:function (file) {
            file.url = file.response.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",
        limit: 2,
            onSuccess:function (file) {
            file.url = file.response.url;
        }
    },
}

参考:arco-design_Upload

value :Array | String

注意

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

Props

参数名	描述	类型	默认值	版本
onSuccess	上传成功时触发	`string`	`-`
accept	接收的上传文件类型，具体参考 HTML标准	`string`	`-`
action	上传的URL	`string`	`-`
disabled	是否禁用	`boolean`	`false`
multiple	是否支持多文件上传	`boolean`	`false`
directory	是否支持文件夹上传（需要浏览器支持）	`boolean`	`false`
draggable	是否支持拖拽上传	`boolean`	`false`
tip	提示文字	`string`	`-`
headers	上传请求附加的头信息	`object`	`-`
data	上传请求附加的数据	`Record<string, unknown>\| ((fileItem: FileItem) => Record<string, unknown>)`	`-`
name	上传的文件名	`string \| ((fileItem: FileItem) => string)`	`-`
with-credentials	上传请求是否携带 cookie	`boolean`	`false`
custom-request	自定义上传行为	`(option: RequestOption) => UploadRequest`	`-`
limit	限制上传文件的数量。`0`表示不限制	`number`	`0`
auto-upload	是否自动上传文件	`boolean`	`true`
show-file-list	是否显示文件列表	`boolean`	`true`
show-remove-button	是否显示删除按钮	`boolean`	`true`	2.11.0
show-retry-button	是否显示重试按钮	`boolean`	`true`	2.11.0
show-cancel-button	是否显示取消按钮	`boolean`	`true`	2.11.0
show-upload-button	是否显示上传按钮。2.14.0 版本新增 `showOnExceedLimit` 支持	`boolean \| { showOnExceedLimit: boolean }`	`true`	2.11.0
download	是否在 `<a>` 链接上添加 download 属性	`boolean`	`false`	2.11.0
show-link	在列表模式下，如果上传的文件存在 URL 则展示链接。如果关闭仅展示文字并且点击可以触发 `preview` 事件。 \| `boolean`	`true`	2.13.0
image-loading	`<img>` 的原生 HTML 属性，需要浏览器支持	`'eager' \| 'lazy'`	`-`	2.11.0
list-type	图片列表类型	`'text' \| 'picture' \| 'picture-card'`	`'text'`
response-url-key	Response中获取图片URL的key，开启后会用上传的图片替换预加载的图片	`string \| ((fileItem: FileItem) => string)`	`-`
custom-icon	自定义图标	`CustomIcon`	`-`
image-preview	是否使用 ImagePreview 组件进行预览	`boolean`	`false`	2.14.0
on-before-upload	上传图片前触发	`(file: File) => Promise<boolean>`	`-`
on-before-remove	移除图片前触发	`(fileItem: FileItem) => Promise<boolean>`	`-`
on-button-click	点击上传按钮触发（如果返回 Promise 则会关闭默认 input 上传）	`(event: Event) => Promise<FileList> \| void`	`-`

Events

事件名	描述	参数
exceed-limit	上传的图片超出限制后触发	fileList: `FileItem[]` files: `File[]`
change	上传的图片状态发生改变时触发	fileList: `FileItem[]` fileItem: `fileItem`
progress	上传中的图片进度改变时触发	fileItem: `fileItem` event: `ProgressEvent`
preview	点击图片预览时的触发	fileItem: `FileItem`
error	上传失败时触发	fileItem: `FileItem`

Upload 上传 ​

规则 ​

Props ​

Events ​

Upload 上传

规则

Props

Events