上传组件
本文介绍 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) | — | — |