Upload 上传

accept 文件类型

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

规则

基础示例

const rule = {
    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;
        }
    },
}

Props 配置示例

图片上传

const rule = {
    type: "upload",
    field: "image",
    title: "商品图片",
    value: [],
    props: {
        action: "/upload.php",
        theme: "image",
        accept: "image/*",
        max: 5,
        multiple: true,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

文件上传

const rule = {
    type: "upload",
    field: "file",
    title: "附件上传",
    value: [],
    props: {
        action: "/upload.php",
        theme: "file",
        accept: ".pdf,.doc,.docx",
        max: 3,
        multiple: true,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

限制文件大小

const rule = {
    type: "upload",
    field: "file",
    title: "文件上传",
    value: [],
    props: {
        action: "/upload.php",
        accept: "image/*",
        onBeforeUpload: function (file) {
            if (file.size > 2 * 1024 * 1024) {
                return false; // 限制2MB
            }
            return true;
        },
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Events 事件示例

监听上传状态

const rule = {
    type: "upload",
    field: "file",
    title: "文件上传",
    value: [],
    props: {
        action: "/upload.php",
        onSuccess: function (file) {
            file.url = file.response.url;
        },
    },
    on: {
        change: (fileList, context) => {
            console.log('文件状态改变:', context.file.status);
        },
        fail: (file) => {
            console.log('上传失败:', file);
        },
        progress: (file) => {
            console.log('上传进度:', file.percent);
        },
    },
}

上传后更新其他字段

const rule = [
    {
        type: "upload",
        field: "cover",
        title: "封面图",
        value: [],
        props: {
            action: "/upload.php",
            theme: "image",
            accept: "image/*",
            max: 1,
            onSuccess: function (file) {
                file.url = file.response.url;
            },
        },
        inject: true,
        on: {
            change: ($inject, fileList, context) => {
                // 上传成功后，自动填充图片URL字段
                if (context.file.status === 'success' && context.file.url) {
                    $inject.api.setValue('coverUrl', context.file.url);
                }
            },
        },
    },
    {
        type: "input",
        field: "coverUrl",
        title: "封面URL",
        props: {
            disabled: true,
        },
    },
]

完整配置项:TDesign_Upload

value :Array | String

注意

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