Appearance
文件上传
相同的组件属性请参考基本组件属性
支持多选
是否支持多选
最大上传个数
最大上传个数
文件大小限制
文件大小限制
限制文件类型
原生accept属性
默认值
默认值是个json
- 示例
javascript
[
{ "url":"xxxx","status": "done","message":"上传中..."}
]- 字段解释
| 参数 | 说明 | 默认值 |
|---|---|---|
| url | 图片地址 | true |
| status | 状态 uploading:上传中;failed:失败;done:成功 | false |
| message | 提示语 | false |
| isImage | url不包含类型是否为图片类型 | false |
实战
文件选择被改变时都会触发upload-fun 方法,你可以在此自定义方法做图片上传与修正
html示例
html
<json-form
:list="list"
@emit="print"
:upload-fun="uploadFun"
></json-form>javascript
export default {
data() {
return {
list: [
{
type: "uploader",
name: "文件上传",
exhibitionType: "row",
mustFill: false,
rules: [],
events: {
uploadDel:true
},
prop: {
name: "upload",
value: [],
accept:'image/*',
multiple:true,//是否多传
maxCount:3, //最大上传个数,
maxSize:"5 * 1024", //文件大小
},
icon:'point-gift',
msgs: {
className: "class-msg",
msg: "",
},
}
],
}
},
methods: {
print(param) {
if(param.event == "uploadDel"){
// param.index:当前list的下标
// param.file:被删的对象
}
},
uploadFun(file,index){
//file对象,index当前list的下标
//在这里写压缩,上传等逻辑
return new Promise(resolve=>{
let res = [];
for(let i=0;i< file.length;i++ ){
let ress = {
status:true,
src:'https://img.yzcdn.cn/vant/leaf.jpg'
};
res.push(ress)
}
resolve(res)
})
}
},
}