form-create

上传组件

本文介绍 upload 组件文件上传后如何回显

注意

通过 onSuccess 设置上传成功解析回调, 将接口返回内容中的 url 赋值给 file.url

上传图片

以 ant-design-vue 为例, 其他 ui 框架类似.

<template>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    },
                    resetBtn:true
                },
                rule:[
                    {
                        type:'upload',
                        field:'image',
                        title:'图片',
                        props: {
                            listType: "picture-card",
                            action: 'https://jsonplaceholder.typicode.com/posts/',
                            onSuccess(file){
                                file.url = file.response.url || 'http://form-create.com/logo.png'
                                console.log(arguments)
                            }
                        },
                        value: []
                    },
                ]
            }
            
        }
    }
</script>

props

form-create 对 upload 组件做了二次封装, props增加了两个配置项

参数说明类型可选值默认值
onSuccess文件上传成功时的钩子 function (res, file) {file.url = res.data.filePath;} 通过给回调中的 file.url 赋值回显function(response, file, fileList)——