# form-uploader * ie10以上/Ajax2 支持完美 ## 参数 ### props ```javascript const props = { hidden: false, // 是否渲染 默认false readOnly: false, disabled: false, // 是否禁用 默认false briefDescription: "帮助文字帮助文字帮助文字帮助文字帮助文字帮助文字", //帮助文字 status: 'edit', // 显示状态 edit 编辑态 show 显示态 hasLoadFile: [], // 已经上传的文件 show状态下 显示文件 labelText: '', // 左侧文字 labelTip: '', // 右侧提示信息 lablePos: true, // label位置,true时在左边,false在上边 lableTxt: false, // label中文字对齐方式,true左对齐,false右对齐 hiddenTip: false, // tooltips visibles 默认显示 sideTip: false, // tooltips direction 默认方向 top-bottom url: '', // 上传地址 acceptData: '', // input accept data multiple: false, fileInputName: '', // input[type='file']的name fileSize: '2mb', // mb kb b fileType: [], // 提供文件验证类型 默认['jpeg','JPEG','pdf','PDF','docx','DOCX','xlsx','XLSX','ppt','PPT','rar','RAR','txt','TXT','xls','XLS','doc','zip','ZIP','jpg','JPG','gif','GIF','png','PNG','pptx','PPTX','mmap','MMAP'] onceUploadCount: 2, // multiple时 一次可选的文件数量 allUploadConut: 2, // 总共文件上传数量 extendData: {}, // key-value errorMessage: { // 错误信息 error: true, message: '必填' }, previewUrl: "www.baidu.com", uploadType: 'BC_PictureUploader', // BC_PictureUploader和BC_FileUploader 根据不同类型提示不同验证信息 isDrag: true, // 拖拽默认有 默认true withCredentials:false, // 文件上传xhr对象的withCredentials属性 uploadText:'上传', // 上传按钮文字,默认 "上传" onSuccess: (event, response) => console.log(event, response, allData, uploadDone), // 上传成功 参数 ajax event , response, allData所有上传的数据, uploadDone所有文件上传成功后的回调 onFailure: (event, response) => console.log(event, response), // 上传失败 参数 ajax event , response onProgress: (event) => console.log(event), // 上传过程回调 event ajax事件对象 onDragOver: (event) => console.log(event), // 文件拖至区域 event onDragLeave: (event) => console.log(event), // 文件离开区域 event onDrop: (event) => console.log(event), // 拖至区域 event onDelete: (file) => console.log(file), // 删除文件 onceUploadFiles:(number) => console.log('onceUploadFiles') onceUploadFiles:(number) => {}, //上传完单个文件后的回调 onPreviewImg:(url) =>{}, //点击预览后的回调 translation: { fileSizeZeroError: '文件大小不许为0字节!', previewDownloadText: '下载', reUploadText: '重新上传', uploadOnceLimit: '单次上传文件数不能超过', uploadOnceLimitUnit: '个', fileNameContainsCommaError: '文件名不允许包含符号","', allFilesCountLimit: '总文件数不能超过', allFilesCountLimitUnit: '个', emptyText: '- 空 -' } } ``` ## 使用方法 1.安装npm组件包 ``` npm install @beisen/form-uploader --save-dev ``` 2.引用组件 ```javascript import FormUploader from "@beisen/form-uploader" ``` 3.传入参数 该参数为上述参数,传入方式使用: {...参数} ```javascript this.state = { hidden: false, // 是否渲染 默认false readOnly: false, disabled: false, // 是否禁用 默认false briefDescription: "帮助文字帮助文字帮助文字帮助文字帮助文字帮助文字", //帮助文字 status: 'edit', // 显示状态 edit 编辑态 show 显示态 hasLoadFile: [], // 已经上传的文件 show状态下 显示文件 labelText: '', // 左侧文字 labelTip: '', // 右侧提示信息 lablePos: true, //label位置,true时在左边,false在上边 lableTxt: false, //label中文字对齐方式,true左对齐,false右对齐 hiddenTip={false}, // tooltips visibles 默认显示 sideTip={false}, // tooltips direction 默认方向 top-bottom url: '', // 上传地址 acceptData: '', // input accept data multiple: false, fileInputName: '', // input[type='file']的name fileSize: '2mb',// mb kb b fileType: [], // 提供文件验证类型 默认['jpeg','JPEG','pdf','PDF','docx','DOCX','xlsx','XLSX','ppt','PPT','rar','RAR','txt','TXT','xls','XLS','doc','zip','ZIP','jpg','JPG','gif','GIF','png','PNG','pptx','PPTX','mmap','MMAP'] onceUploadCount: 2, // multiple时 一次可选的文件数量 allUploadConut: 2, // 总共文件上传数量 extendData: {}, // key-value errorMessage: {error:true, messages:'必填'}, //错误信息 previewUrl:"www.baidu.com", uploadType: 'BC_PictureUploader', // BC_PictureUploader和BC_FileUploader 根据不同类型提示不同验证信息 isDrag: true, // 拖拽默认有 默认true onSuccess: (event, response) => console.log(event, response), // 上传成功 参数 ajax event , response onFailure: (event, response) => console.log(event, response), // 上传失败 参数 ajax event , response onProgress: (event) => console.log(event), // 上传过程回调 event ajax事件对象 onDragOver: (event) => console.log(event), // 文件拖至区域 event onDragLeave: (event) => console.log(event), // 文件离开区域 event onDrop: (event) => console.log(event), // 拖至区域 event onDelete: (file) => console.log(file) // 删除文件 onceUploadFiles:(number) => console.log('onceUploadFiles') } render() { const { status } = this.state; return (