File 文件上传

文件上传

基本用法

• 1. 支持文件上传
• 2. 支持图片上传并预览
• 3. 支持拖拽和粘贴上传

<template>
    <dn-page>     
      <dn-form ref="formRef" v-bind="formOptions">       
      </dn-form>            
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent} from "vue";
import {   useForm } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();
function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {     
      fn1: {
        title: "单个文件",
        type: "uploaderfile",
        form: {
          col:{span:24},
          rules:[],
          tooltip:'只能传一个',         
          props:{
            limit:1,
            uploaderOption:{
                data:{
                    //上传时的表单附加参数
                    form:'test'
                }
            },
            value:"/upload/401.png",
            events:{
              onChange:(scope)=>{
                console.log('out',scope);
              }
            }        
          }                   
        }      
      },
      fn3:{
        type:'split',
        form:{            
            props:{
                text:'分割线'
            }
        }
      },
      fn2: {
        title: "Ctrl选择多个文件",
        type: "uploaderfile",
        form: {
          col:{span:24},
          tooltip:{
            text:'限制 2 个文件，最大 1 M',
            color:'#ff0000'
          },
          component:{
            multiple:true
          },
          props:{
            limit:2,
            sizeLimit:1024 * 1024,
            value:'/upload/404.png'
          }                   
        }      
      },
      fn4:{
        type:'split',
        form:{            
            props:{
                text:'分割线'
            }
        }
      },
      fn5: {
        title: "图片上传",
        type: "uploaderimage",
        form: {
          col:{span:24}, 
          component:{
            multiple:true
          },        
          tooltip:{
            text:'限制 2 个文件，最大 1 M',
            iconColor:'red',
            position:'label'
          },
          props:{        
            limit:2,    
            sizeLimit: 1024 * 1024,            
            preview:{
              minScale:0.5
            },
            value: "/upload/logo.jpg,/upload/logo2.jpg",            
            events:{
              onChange:(scope)=>{
                console.log('out',scope);
              }
            }  
          }                   
        }      
      },
      fn6: {
        title: "拖拽上传",
        type: "uploaderimage",
        form: {
          col:{span:24}, 
          component:{
            multiple:true,
            drag:true
          },                  
          props:{        
            limit:5,    
            sizeLimit: 1024 * 1024                           
          }                   
        }      
      },
      fn7:{
        type:'split',
        form:{            
            props:{
                text:'分割线'
            }
        }
      },
      fn8: {
        title: "粘贴上传",
        type: "uploaderimage",
        form: {
          col:{span:24}, 
          component:{
            multiple:true,
            paste:true
          },                  
          props:{        
            limit:5,    
            sizeLimit: 1024 * 1024                   
          }                   
        }      
      },
    } ,
    form:{
      labelPosition:'left'
    }   
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1,fn1:null};
 
  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup() {
    return {
      ...initFormOptions()
    };
  }
});
</script>

File API

PropsName	Description	Type	Default
uploadOptions	上传配置参考项目集成	json
key	字段名称子组件column配置	json
└ title	标题	string
└ type	uploaderfile uploaderimage	string
└ form	表单栏位配置	json
└└ rules	验证规则，参考原生el配置	array
└└ col	el-col配置，参考原生组件	json
└└ component	原生组件属性	json
└└└ multiple	是否Ctrl+多选	boolean	false
└└└ drag	是否拖拽上传	boolean	false
└└└ paste	是否粘贴上传,true则自动开启拖拽上传	boolean	false
└└└ key	参考原生el组件
└└ props	组件属性	json
└└└ limit	上传数量	number	1
└└└ sizeLimit	上传文件大小，字节单位	number
└└└ deleteConfirm	删除文件确认提示	boolean	true
└└└ uploaderOption	上传选项	json
└└└└ uploadMode	上传模式	'' / ftp / http 等
└└└└ data	上传附加参数	json
└└└└└ key	附加参数	any
└└└ events	组件事件	json
└└└└ onChange	值change触发
└└└└ onBeforeUpload	上传前，返回不是空字符串则提示后取消上传
└└└└ onBeforeRemove	移除前，返回不是空字符串则提示后取消上传
└└└ slots	组件槽位，	json
└└└└ key	组件槽位，参考原生槽位
└└ tooltip	输入提示内容	string
└└ order	排序	number
└└ show	是否显示	boolean

File 事件

Name	Description
file-select
success
exceed	,throw 则取消
原生事件	component下写事件，参考原生组件事件

File Slots

Name	Description
key_[原生组件槽位名称]	原生槽位

File Exposes

Name	Description
ctlRef	原生组件引用
hasUploading	是否上传中，