Skip to content

文件上传

相同的组件属性请参考基本组件属性

支持多选

是否支持多选

最大上传个数

最大上传个数

文件大小限制

文件大小限制

限制文件类型

原生accept属性

默认值

默认值是个json

  • 示例
javascript
  [
    { "url":"xxxx","status": "done","message":"上传中..."}
  ]
  • 字段解释
参数说明默认值
url图片地址true
status状态 uploading:上传中;failed:失败;done:成功false
message提示语false
isImageurl不包含类型是否为图片类型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)
       })
    }
  },
}