Upload 上传
规则
js
{
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: {
type:"select",
uploadType:"image",
action: "/upload.php",
name:"pic",
multiple: true,
accept:"image\/*",
limit: 2,
onSuccess:function (res, file) {
file.url = res.data.filePath;
}
},
}
完整配置项:Element_Upload
value :Array | String
注意
文件上传成功后需要通过 onSuccess 回调, 将接口返回内容中的 url 赋值给 file.url.否则表单获取不到组件的数据
Props
名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
action required | 请求 URL | string | # |
uploadType | 上传文件类型 | String | image(图片上传),file(文件上传) |
headers | 设置上传的请求头部 | object | — |
method | 设置上传请求方法 | string | post |
multiple | 是否支持多选文件 | boolean | false |
data | 上传时附带的额外参数 从 v2.3.13 支持 Awaitable 数据,和 Function | object / Function | {} |
name | 上传的文件字段名 | string | file |
withCredentials | 支持发送 cookie 凭证信息 | boolean | false |
showFileList | 是否显示已上传文件列表 | boolean | true |
drag | 是否启用拖拽上传 | boolean | false |
accept | 接受上传的文件类型(thumbnail-mode 模式下此参数无效) | string | '' |
crossorigin | 原生属性 crossorigin | enum | — |
onPreview | 点击文件列表中已上传的文件时的钩子 | Function | — |
onRemove | 文件列表移除文件时的钩子 | Function | — |
onSuccess | 文件上传成功时的钩子 function (res, file) {file.url = res.data.filePath;} 通过给回调中的 file.url 赋值回显 | function(response, file, fileList) | — |
onError | 文件上传失败时的钩子 | Function | — |
onProgress | 文件上传时的钩子 | Function | — |
onChange | 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 | Function | — |
onExceed | 当超出限制时,执行的钩子函数 | Function | — |
beforeUpload | 上传文件之前的钩子,参数为上传的文件, 若返回false 或者返回 Promise 且被 reject,则停止上传。 | Function | — |
beforeRemove | 删除文件之前的钩子,参数为上传的文件和文件列表, 若返回 false 或者返回 Promise 且被 reject,则停止删除。 | Function | — |
listType | 文件列表的类型 | enum | text |
autoUpload | 是否自动上传文件 | boolean | true |
httpRequest | 覆盖默认的 Xhr 行为,允许自行实现上传文件的请求 | Function | 请参考ajaxUpload |
disabled | 是否禁用上传 | boolean | false |
limit | 允许上传文件的最大数量 | number | — |
modalTitle | 图片预览弹出框标题文字 | String | 预览 |
Slots
名称 | 描述 | 类型 |
---|---|---|
default | 自定义默认内容 | - |
trigger | 触发文件选择框的内容 | - |
tip | 提示说明文字 | - |
file | 缩略图模板的内容 | object |