Skip to content

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请求 URLstring#
uploadType上传文件类型Stringimage(图片上传),file(文件上传)
headers设置上传的请求头部object
method设置上传请求方法stringpost
multiple是否支持多选文件booleanfalse
data上传时附带的额外参数 从 v2.3.13 支持 Awaitable 数据,和 Functionobject / Function{}
name上传的文件字段名stringfile
withCredentials支持发送 cookie 凭证信息booleanfalse
showFileList是否显示已上传文件列表booleantrue
drag是否启用拖拽上传booleanfalse
accept接受上传的文件类型(thumbnail-mode 模式下此参数无效)string''
crossorigin原生属性 crossoriginenum
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文件列表的类型enumtext
autoUpload是否自动上传文件booleantrue
httpRequest覆盖默认的 Xhr 行为,允许自行实现上传文件的请求Function请参考ajaxUpload
disabled是否禁用上传booleanfalse
limit允许上传文件的最大数量number
modalTitle图片预览弹出框标题文字String预览

Slots

名称描述类型
default自定义默认内容-
trigger触发文件选择框的内容-
tip提示说明文字-
file缩略图模板的内容object

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用