eg-upload

这是一款基于eagle-ui开发的上传文件组件；

UI展示

使用

	import {Upload} from 'eg-upload';
    import React, { Component ,PropTypes} from 'react';
    import ReactDom from 'react/lib/ReactDOM';
    
    //completeCallback 全部上传完成
    //successCallback  单张上传成功 会执行多次
    //failureCallback  上传失败
    ReactDom.render(
        <Upload uploadUrl="http://172.24.121.17:8080/attachment/upload" maxNumber={5} successCallback={(file,data)=>{}} 
          	completeCallback={()=>{}}
			failureCallback={(file,data)=>{}}
			filter={()=>{}}
			uploadBtnText="选择上传文件"
          />,
        document.getElementById('root')
    );

API

props

• uploadUrl：提交服务器地址；
• maxSize：允许上传文件大小；
• maxNumber：文件最大上传数量；
• minNumber：文件最少上传数量；
• uploadBtnText：上传按钮文案；
• maxNumberMessage：超出范围的提示文案；
• egSize：上传按钮大小（default、xs、sm、lg）;
• egStyle：上传按钮颜色（error、warning、danger、link、gray、white、success、''）；
• width：略缩图容器的宽度；
• height：略缩图容器的高度；
• thumbWidth：略缩图宽度；
• thumbHeight：略缩图高度；

callback

• completeCallback(successImageList,imageListSize)：上传单个文件成功后和删除文件后执行的方法，successImageList上传成功后的文件列表，imageListSize一共选择多少个文件；

• failureCallback(file,responseText)：上传单个文件失败后执行，file失败后的文件，responseText失败信息，由服务端返回；

• successCallback(file,data)：单个文件上传成功后执行，file上传成功的文件，data服务端返回的json数据；

• renderItemCallback(files)：返回自定义略缩图模板，用户可自定义容器中显示的内容模板，该方法的作用域为upload对象本身，files需要显示的文件列表，

    
      renderItemCallback([
          index:file.index,//文件的索引
          name:file.name,//文件的名字
          result:'',//base64
          type:file.type//类型
      ])

• filter(files,maxSize)：过滤不允许上传的文件

    
      filter=(files,maxSize)=>{
          var arrFiles = [];
          for (var i = 0, file; file = files[i]; i++) {
              arrFiles.push(file);
              if (file.type.indexOf("image") == 0) {
                  if (file.size >= maxSize) {
                      alert(`您这张${file.name}图片大小过大，应小于${maxSize}k`);
                  } else {
                      arrFiles.push(file);
                  }
              } else {
                  alert('文件"' + file.name + '"不是图片。');
              }
          }
          return arrFiles;
      }

项目示例

下载项目到本地安装依赖包后执行 npm run demo 即可查看示例演示。