@beisen/form-uploader/lib/index.js

form file image uploader

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _toolTip = require('@beisen/tool-tip');

var _toolTip2 = _interopRequireDefault(_toolTip);

var _commonLabel = require('@beisen/common-label');

var _commonLabel2 = _interopRequireDefault(_commonLabel);

var _commonFunc = require('@beisen/common-func');

require('../src/index.scss');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } /* eslint-disable */


function getBody(xhr) {
  var text = xhr.responseText || xhr.response;
  if (!text) {
    return text;
  }

  try {
    return JSON.parse(text);
  } catch (e) {
    return text;
  }
}

var fileiconName = {
  aac: 'asc',
  ape: 'ape',
  asf: 'asf',
  avi: 'avi',
  doc: 'doc',
  docx: 'docx',
  exe: 'exe',
  file: 'file',
  flac: 'flac',
  flv: 'flv',
  folder: 'folder',
  folder2: 'folder2',
  gif: 'gif',
  image: 'image',
  jpeg: 'jpeg',
  jpg: 'jpg',
  m4a: 'm4a',
  m4v: 'm4v',
  mkv: 'mkv',
  mmap: 'mmap',
  mov: 'mov',
  mp3: 'mp3',
  mp4: 'mp4',
  mpeg: 'mpeg',
  mpg: 'mpg',
  music: 'music',
  none: 'none',
  ogg: 'ogg',
  pdf: 'pdf',
  pic: 'pic',
  png: 'png',
  ppt: 'ppt',
  pptx: 'pptx',
  rar: 'rar',
  rm: 'rm',
  rmvb: 'rmvb',
  tif: 'tif',
  ts: 'ts',
  txt: 'txt',
  video: 'video',
  wav: 'wav',
  wma: 'wma',
  wmv: 'wmv',
  xls: 'xls',
  xlsx: 'xlsx',
  zip: 'zip'
};

var defaultTranslation = {
  fileSizeZeroError: '文件大小不许为0字节！',
  previewDownloadText: '下载',
  reUploadText: '重新上传',
  uploadOnceLimit: '单次上传文件数不能超过{0}个',
  fileNameContainsCommaError: '文件名不允许包含符号","',
  allFilesCountLimit: '总文件数不能超过{0}个',
  emptyText: '- 空 -',
  fileTypeError: '文件格式错误!!!',
  fileSizeBigError: '上传文件大小不得超过{0}！',
  uploadText: '上传'
};

var FormUploader = function (_Component) {
  _inherits(FormUploader, _Component);

  function FormUploader(props) {
    _classCallCheck(this, FormUploader);

    // const defaults = {
    //   labelText: '', // 左侧文字`
    //   labelTip: '', // 右侧提示信息
    //   status: 'show', // show状态 和 edit 状态
    //   url: '', // 上传地址
    //   multiple: true,
    //   fileInputName: '',
    //   fileSize: '2mb',// mb kb b
    //   fileType: [], // 提供文件验证类型
    //   onceUploadCount: 3, // multiple时
    //   allUploadConut: 6,
    //   hasLoadFile: [], // 已经上传的文件
    //   extendData: {}, // key-value
    //   isDrag: true,  // formItem 拖拽默认有 粘贴没有
    //   isPaste: true, //  只有功能性组件 默认有
    //   hasLoadFile: [], // 已经上传文件
    //   previewText: '' || '预览',
    //   maxLength:false,
    //   onSuccess: () => {}, // 发送数据成功回调
    //   onFailure: () => {}, // 请求失败回调
    //   onProgress: () => {}, // 请求过程回调
    //   onDragOver: () => {}, // 文件拖至区域
    //   onDragLeave: () => {}, // 文件离开区域
    //   onDrop: () => {} // 拖至区域
    // };
    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.valiFileTypeIfPass = function (name, suportArr) {
      var ifsuport = false;
      var lastIndex = name.lastIndexOf('.');
      var fileType = name.slice(lastIndex + 1, name.length);
      suportArr.map(function (cmp, index) {
        if (cmp.toLowerCase() == fileType.toLowerCase()) {
          ifsuport = true;
        }
      });
      return ifsuport;
    };

    _this.checkIsPreviewType = function (url, supportData) {
      if (!supportData) return false;
      // 这里拿链接地址进行判断 是不是包含在支持预览的地址里面的
      var index = url.lastIndexOf('.');
      var type = url.slice(index + 1, url.length);
      if (supportData.indexOf(type) >= 0) {
        return 'true';
      } else {
        return 'false';
      }
    };

    _this.renderHelpText = function () {
      var _this$props = _this.props,
          hiddenTip = _this$props.hiddenTip,
          sideTip = _this$props.sideTip,
          briefDescription = _this$props.briefDescription;

      if (!briefDescription) return;
      return _react2.default.createElement(
        _toolTip2.default,
        { title: briefDescription, hidden: hiddenTip, side: sideTip },
        _react2.default.createElement(
          'div',
          { className: 'form-uploader-help' },
          briefDescription
        )
      );
    };

    _this.translation = _extends({}, defaultTranslation, props.translation);
    _this.previewUrl = {};
    for (var i = 0; i < props.hasLoadFile.length; i++) {
      if (props.hasLoadFile[i].Name == "") {
        props.hasLoadFile.splice(i, 1);
      }
    }
    _this.tempRank = null;
    _this.state = {
      hasUploadCount: props.hasLoadFile && props.hasLoadFile.length || 0,
      isDrag: props.isDrag || true,
      // isPaste: props.isPaste || true,
      // fileList: [], // 通过input添加的文件
      response: props.hasLoadFile || [], // 上传成功返回的结果
      isSuccess: false,
      currentFileList: [], // 单次通过input添加的文件
      currentFile: [], //总的input添加的文件
      errorMessage: props.errorMessage, //必填验证
      errorShow: { type: false, messages: '' },
      disappearTime: 2, //自动消失时间，默认为1.5s，可选值有1.5,3,5,10
      isRenderInput: true, //重新渲染上传按钮，刷新上传按钮的值
      uid: _this.getUid(),
      isRequest: false, //wangyongning 请求过程中
      isDel: 0 //删除的个数
    };
    _this.changeFiles = _this.changeFiles.bind(_this);
    _this.deleteFile = _this.deleteFile.bind(_this);
    _this.renderShow = _this.renderShow.bind(_this);
    _this.renderCurrentFile = _this.renderCurrentFile.bind(_this);
    _this.disButton = _this.disButton.bind(_this);
    _this.clickPreview = _this.clickPreview.bind(_this);
    _this.getPreviewUrl = _this.getPreviewUrl.bind(_this);
    _this.handleKeyDown = _this.handleKeyDown.bind(_this);
    return _this;
  }

  // zhongjiahao


  FormUploader.prototype.getUid = function getUid() {
    var now = +new Date();
    var index = 0;
    return 'upload-' + now + '-' + ++index;
  };

  FormUploader.prototype.reset = function reset() {
    var _id = 'uploader-input-' + this.tempRank;
    var btn = document.getElementById(_id);
    btn.setAttribute('value', '');
  };

  // input type file  change 事件


  FormUploader.prototype.changeFiles = function changeFiles(event) {
    var _props = this.props,
        multiple = _props.multiple,
        onceUploadCount = _props.onceUploadCount,
        allUploadConut = _props.allUploadConut,
        onceUploadFiles = _props.onceUploadFiles;
    var response = this.state.response;

    var _hasUploadCount = response.length || 0;
    var files = event.target.files || event.dataTransfer.files;
    var self = this;

    /*
    多选时 单次上传数量验证
     */
    try {
      if (multiple && onceUploadCount < files.length) {
        // self.refs.formUploader.value = "";
        if (onceUploadFiles) {
          onceUploadFiles(0);
        }
        throw {
          name: "TypeError",
          message: (0, _commonFunc.transFormat)(this.translation.uploadOnceLimit, onceUploadCount) + '！'
        };
      }
      for (var i = files.length - 1; i >= 0; i--) {
        var temp = files[i];
        var name = temp.name;
        if (name.indexOf(",") != -1) {
          throw {
            name: "TypeError",
            message: this.translation.fileNameContainsCommaError
          };
          break;
        }
      };
      if (multiple && _hasUploadCount + files.length > allUploadConut) {
        // self.refs.formUploader.value = "";
        if (onceUploadFiles) {
          onceUploadFiles(0);
        }
        throw {
          name: "TypeError",
          message: (0, _commonFunc.transFormat)(this.translation.allFilesCountLimit, allUploadConut) + '！'
        };
      }
    } catch (err) {
      // for (let i = 0; i < files.length; i++) {
      //   currentFile.pop();
      // }
      this.state.errorShow.messages = err.message;
      this.state.errorShow.type = true;
      this.setState(this.state);
      setTimeout(function () {
        self.state.errorShow.type = false;
        self.state.maxLength = false;
        self.setState(self.state);
      }, self.state.disappearTime * 1000);

      return;
    }
    if (_hasUploadCount + files.length == allUploadConut) {
      // this.setState({maxLength: true})
      this.state.maxLength = true;
    }
    this.fileThen(files);
    this.reset();
  };

  FormUploader.prototype.fileThen = function fileThen(files) {
    var currentFileList = this.state.currentFileList;
    var onceUploadFiles = this.props.onceUploadFiles;

    var self = this;
    for (var i = 0; i < files.length; i++) {
      if (files[i].size == 0) {
        this.state.errorShow.messages = this.translation.fileSizeZeroError;
        this.state.errorShow.type = true;
        this.setState({
          maxLength: false
        });
        setTimeout(function () {
          self.state.errorShow.type = false;
          self.setState(self.state);
        }, self.state.disappearTime * 1000);
        if (onceUploadFiles) {
          onceUploadFiles(0);
        }
        // return; //注释掉该return, 在这return会造成后续正常文件无法上传的情况，且删除报错等问题
      }
      if (files[i].size != 0) {
        currentFileList.push(files[i]);
      }
    }
    this.state.isSuccess = false;
    // this.setState(this.state);
    this.fileValidCheck();
    if (currentFileList.length == 0) return;
    // this.refs.formUploader.value = '';
    this.fileReader();

    // xuqian
    // 文件多个上传
    this.count = 0;
    this.allCount = currentFileList.length;
    this.uploadDone = false;
    for (var _i = 0; _i < currentFileList.length; _i++) {
      this.uploadFile(this.formData(currentFileList[_i]));
    }
    //this.uploadFile(this.formData());
  };

  // 图片 预览 HTML5


  FormUploader.prototype.fileReader = function fileReader() {
    var _this2 = this;

    var self = this;
    var currentFileList = this.state.currentFileList;

    var _loop = function _loop(i) {
      if (currentFileList[i].type.indexOf('image') != 0) return 'continue';
      var readers = new FileReader();
      readers.addEventListener('load', function (event) {
        if (self.state.currentFileList[i]) self.state.currentFileList[i].dataUrl = event.target.result;
        self.setState(_this2.state);
      }, false);
      readers.readAsDataURL(currentFileList[i]);
    };

    for (var i = 0; i < currentFileList.length; i++) {
      var _ret = _loop(i);

      if (_ret === 'continue') continue;
    }
  };

  FormUploader.prototype.translateImage = function translateImage(fileUrl, size) {
    // var tempFileSum = fileUrl.split(".")
    // var fileType = tempFileSum[tempFileSum.length-1]
    // var translateSrc = fileUrl
    // if (tempFileSum.length > 2) {
    //     var index = fileUrl.indexOf(fileType) - 1
    //     translateSrc = fileUrl.substring(0, index) + '_' + size + '.' + fileType
    // } else {
    //     translateSrc = tempFileSum[0] + '_' + size + '.' +  fileType
    // }

    //修改为在地址后面加resize20作为压缩参数，之前为在末尾 xxx_20.png 这种格式
    var tempFileSum = fileUrl.split("/");
    var url = tempFileSum[2];
    var index = fileUrl.indexOf(url);
    var translateSrc = '//' + url + '/resize' + size + fileUrl.substring(index + url.length, fileUrl.length);

    return BSGlobal.supportPicCompression ? translateSrc : fileUrl;
  };

  // 文件格式正则


  FormUploader.prototype.fileRegExp = function fileRegExp() {
    var fileType = this.props.fileType;

    var temp = void 0;
    // 文件格式验证
    if (!fileType) {
      // const 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'];
      // temp = fileType.join('|');
      temp = 'alltype';
    } else {
      temp = fileType.join('|');
    }
    return new RegExp('(' + temp + ')$', 'i');
  };

  FormUploader.prototype.fileMaxSize = function fileMaxSize() {
    var fileSize = this.props.fileSize; // 文件限制大小

    var sizeLabel = {
      'b': 1,
      'B': 1,
      'kb': 1024,
      'Kb': 1024,
      'KB': 1024,
      'M': 1024 * 1024,
      'mb': 1024 * 1024,
      'Mb': 1024 * 1024,
      'MB': 1024 * 1024
    };
    return fileSize && sizeLabel[fileSize.match(/\D+/i)[0]] * fileSize.match(/\d+/i)[0] || 2 * 1024 * 1024;
  };

  // 文件 格式、大小验证
  FormUploader.prototype.fileValidCheck = function fileValidCheck() {
    var reg_image = this.fileRegExp(); // 返回文件正则
    var maxSize = this.fileMaxSize(); // 返回文件大小
    var currentFileList = this.state.currentFileList;
    var _props2 = this.props,
        onceUploadFiles = _props2.onceUploadFiles,
        _props2$cutsomFileTyp = _props2.cutsomFileTypeErrorTip,
        cutsomFileTypeErrorTip = _props2$cutsomFileTyp === undefined ? this.translation.fileTypeError : _props2$cutsomFileTyp,
        fileSizeMessage = _props2.fileSizeMessage,
        fileTypeMessage = _props2.fileTypeMessage;

    var self = this;
    for (var i = 0; i < currentFileList.length; i++) {
      try {
        // 这里进行大小写模糊匹对
        var fileTypeVali = this.valiFileTypeIfPass(currentFileList[i].name, this.props.fileType);
        if (reg_image.test('alltype') ? true : fileTypeVali) {
          // 格式
          if (currentFileList[i].size > maxSize) {
            // 大小
            if (onceUploadFiles) onceUploadFiles(0); //
            throw {
              name: 'TypeError',
              message: fileSizeMessage ? fileSizeMessage : (0, _commonFunc.transFormat)(this.translation.fileSizeBigError, this.props.fileSize)
            };
          }
        } else {
          if (onceUploadFiles) onceUploadFiles(0);
          throw {
            name: 'TypeError',
            message: fileTypeMessage ? fileTypeMessage : cutsomFileTypeErrorTip
          };
        }
      } catch (err) {
        //xuqian
        //提示信息的显示隐藏
        this.state.errorShow.messages = err.message;
        this.state.errorShow.type = true;
        this.state.maxLength = false;
        this.state.currentFileList.splice(i, 1);
        i--;
        this.setState(this.state);
        setTimeout(function () {
          self.state.errorShow.type = false;
          self.state.maxLength = false;
          self.setState(self.state);
        }, self.state.disappearTime * 1000);
      }
    }
  };

  // ajax or form 上传


  FormUploader.prototype.uploadFile = function uploadFile(formData) {
    if (window.XMLHttpRequest && window.FormData) {
      this.uploadAjax(formData);
    } else {
      this.uploadForm();
    }
  };
  // ajax formData


  FormUploader.prototype.formData = function formData(currentFile) {
    var fileInputName = this.props.fileInputName;
    //const {currentFileList} = this.state;

    var formData = new FormData();
    // xuqian
    // 文件多个上传
    // for (let i = 0; i < currentFileList.length; i++) {
    //   formData.append(fileInputName, currentFileList[i]);
    // }
    formData.append(fileInputName, currentFile);

    // 额外数据
    var extendData = this.props.extendData;

    if (extendData) {
      for (var i in extendData) {
        formData.append(i, extendData[i]);
      }
    }
    return formData;
  };

  // ajax上传文件


  FormUploader.prototype.uploadAjax = function uploadAjax(formData) {
    var _props3 = this.props,
        onSuccess = _props3.onSuccess,
        multiple = _props3.multiple,
        onFailure = _props3.onFailure,
        onProgress = _props3.onProgress,
        url = _props3.url,
        withCredentials = _props3.withCredentials,
        onceUploadFiles = _props3.onceUploadFiles;
    //修改了currentFileList 用currentFile代替

    var currentFileList = this.state.currentFileList;

    if (onceUploadFiles) {
      onceUploadFiles(currentFileList.length);
    }
    var self = this;
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function (event) {
      if (!self.props.children && event.lengthComputable) {
        var value = event.loaded / event.total * 100;
        var progress = self.refs.progressCon.querySelectorAll('progress');
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = progress[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var dom = _step.value;

            //回调里没有唯一标示，简易判断时哪个进度条
            if (dom.id && dom.id == event.total.toString()) {
              dom.value = value;
            } else {
              if (!dom.id) {
                dom.id = event.total;
                break;
              }
            }
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return) {
              _iterator.return();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }

        onProgress && onProgress(event);
      }
    });
    xhr.onreadystatechange = function (event) {
      self.state.isRequest = true; //请求中
      // 当 state 为 0 即开始上传时，先暂时将错误信息隐藏
      if (xhr.readyState == 0) {
        self.state.errorShow.type = false;
        self.setState(self.state);
      }
      if (!multiple) {
        self.setState({
          response: [],
          currentFileList: []
        });
      }
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          self.state.isRequest = false; //请求完毕
          self.state.response.push(getBody(xhr));
          //多文件一起传当第一个文件传完进度条都得会消失，判断Bug,现改成如下
          var responseData = JSON.parse(xhr.response);
          var index = self.state.currentFileList.findIndex(function (item) {
            return item.name == responseData.Name;
          });
          self.state.currentFileList.splice(index, 1);
          if (self.state.currentFileList.length == 0) {
            self.state.isSuccess = true;
          }
          self.setState(self.state);
          self.count++;
          //当所有文件上传完后，将标志位置为true
          if (self.count == self.allCount) {
            self.uploadDone = true;
          }
          onSuccess && onSuccess(event, getBody(xhr), self.state.response, self.uploadDone);
        } else {
          self.state.isRequest = false; //请求完毕
          self.state.currentFileList = [];
          self.state.isSuccess = true;
          self.state.maxLength = false;
          self.setState(self.state);
          onFailure && onFailure(event, getBody(xhr), self.state.response);
        }
      }
    };
    xhr.open('post', url, true);
    if (withCredentials && 'withCredentials' in xhr) {
      xhr.withCredentials = true;
    };
    xhr.send(formData);
    // function finishxhr() {
    //   xhr.abort();
    // };
  };

  // 原生 form提交


  FormUploader.prototype.uploadForm = function uploadForm(files) {
    var fileInputName = this.props.fileInputName;

    var iframe = document.createElement('iframe');
    iframe.name = "uploadTarget";
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    var form = document.createElement('form'),
        input = document.createElement('input');

    form.action = fileInputName || "uploadfile";
    form.method = "post";
    form.target = iframe.name;
    form.enctype = "multipart/form-data";

    input.type = 'file';
    input.name = 'files';
    input.value = files;
    form.appendChild(input);
    form.submit();
  };

  // 拖拽文件


  FormUploader.prototype.dragFile = function dragFile(refValue) {
    var _props4 = this.props,
        onDragOver = _props4.onDragOver,
        onDragLeave = _props4.onDragLeave,
        onDrop = _props4.onDrop;

    var self = this;
    var node = this.refs[refValue];
    if (node) {
      node.addEventListener('dragover', function (event) {
        event.stopPropagation();
        event.preventDefault();
        onDragOver && onDragOver(event);
      }, false);
      node.addEventListener('dragleave', function (event) {
        event.stopPropagation();
        event.preventDefault();
        onDragLeave && onDragLeave(event);
      }, false);
      node.addEventListener('drop', function (event) {
        event.stopPropagation();
        event.preventDefault();
        onDrop && onDrop(event);
        var files = event.dataTransfer.files;
        self.fileThen(files);
      }, false);
    }
  };

  // 粘贴文件


  FormUploader.prototype.pasteFile = function pasteFile(refValue) {
    var self = this;
    var node = this.refs[refValue];
    node.addEventListener('paste', function (event) {
      // safari 木有
      if (!(event.clipboardData && event.clipboardData.items)) return;

      var items = (event.clipboardData || event.originalEvent.clipboardData).items;
      if (!items.length) return;
      var blobs = [];
      // let reg_image = this.fileRegExp();  // 返回文件正则
      // let maxSize = this.fileMaxSize(); // 返回文件限制大小
      for (var i = 0; i < items.length; i++) {
        if (items[i].kind === 'file') {
          var blobItem = items[i].getAsFile();
          if (blobItem.size === 0) return;
          if (!self.fileValidCheck(blobItem)) return;
          blobs.push(blobItem);
        }
      }
      self.fileThen(blobs);
    }, false);
  };

  // 删除文件


  FormUploader.prototype.deleteFile = function deleteFile(event) {
    if (this.state.isRequest) return; //如果在上传过程中 不能删除
    var node = event.target;
    var index = node.getAttribute('data-index');
    var tempFile = this.state.response.splice(parseInt(index), 1);
    if (this.state.currentFileList.length) {
      tempFile = this.state.currentFileList.splice(parseInt(index), 1);
      tempFile = [];
    }

    if (this.props.onDelete) {
      this.props.onDelete(tempFile);
      // wangyongning add: this.props.onDelete()方法成功后会返回true
      // 先删除数据 数据删除成功后再删除DOM 更新state
      this.state.maxLength = false;
      //this.setState(this.state);
    }
  };

  // 渲染 编辑下 上传按钮


  FormUploader.prototype.renderEditBtn = function renderEditBtn() {
    var _props5 = this.props,
        disabled = _props5.disabled,
        multiple = _props5.multiple,
        labelTip = _props5.labelTip,
        _props5$acceptData = _props5.acceptData,
        acceptData = _props5$acceptData === undefined ? '' : _props5$acceptData,
        hasLoadFile = _props5.hasLoadFile,
        allUploadConut = _props5.allUploadConut,
        _props5$uploadText = _props5.uploadText,
        uploadText = _props5$uploadText === undefined ? this.translation.uploadText : _props5$uploadText;
    var _state = this.state,
        maxLength = _state.maxLength,
        isRequest = _state.isRequest;

    var bool = multiple && (maxLength || hasLoadFile.length == allUploadConut) || isRequest ? "uploader_is-max" : "";
    var tempRank = parseInt(Math.random() * 1000);
    this.tempRank = tempRank;
    return _react2.default.createElement(
      'div',
      { className: "uploader-edit clearfix " + bool, ref: 'uploadEdit' },
      _react2.default.createElement(
        'a',
        { className: 'focusable-upload-btn', tabIndex: disabled ? -1 : 0, onClick: this.disButton, ref: 'focusableUploadBtn' },
        _react2.default.createElement('input', { type: 'file',
          id: "uploader-input-" + this.tempRank,
          'data-key': this.state.uid,
          className: 'lala',
          ref: 'formUploader',
          disabled: disabled || bool == "uploader_is-max",
          onChange: this.changeFiles,
          multiple: multiple || false,
          style: bool ? { display: 'none' } : { display: 'block' },
          tabIndex: '-1',
          accept: acceptData,
          title: ''
        }),
        !multiple && (maxLength || hasLoadFile.length == allUploadConut) ? this.translation.reUploadText : (0, _commonFunc.decode)(uploadText)
      ),
      _react2.default.createElement(
        'p',
        null,
        labelTip
      )
    );
  };

  //让上传按钮在窗口出现期间不可点


  FormUploader.prototype.disButton = function disButton(event) {
    var self = this;
    setTimeout(function () {
      self.refs.formUploader.disabled = true;
    }, 1);
    setTimeout(function () {
      self.refs.formUploader.disabled = false;
    }, 1000);
    event.target.blur();
  };
  /*
  渲染 编辑态下 文件列表
   */


  FormUploader.prototype.renderCurrentFile = function renderCurrentFile() {
    var _this3 = this;

    var _state2 = this.state,
        currentFileList = _state2.currentFileList,
        isSuccess = _state2.isSuccess,
        isRequest = _state2.isRequest;

    var tempIcon = void 0;
    var processIcon = void 0;
    if (currentFileList.length == 0) return;
    return currentFileList && currentFileList.map(function (item, index) {
      var name = item.name.split('.');
      if (item.dataUrl) {
        tempIcon = _react2.default.createElement('span', { className: 'file-icon file-picture' });
        // tempIcon = <img src={item.dataUrl} />
      } else {
        var file_icon = fileiconName[name[name.length - 1]] != undefined ? name[name.length - 1] : 'none';
        tempIcon = _react2.default.createElement('span', { className: "file-icon " + 'file-' + file_icon });
      }
      if (!isSuccess) {
        processIcon = _react2.default.createElement('progress', { value: '', max: '100' });
      } else {
        var _fileType = name.pop();
        processIcon = _react2.default.createElement(
          'div',
          { className: 'filenameBox' },
          ' ',
          _react2.default.createElement(
            'p',
            { className: 'file-info' },
            name.join('')
          ),
          _react2.default.createElement(
            'p',
            { className: 'file-typename' },
            "." + _fileType
          )
        );
      }
      return _react2.default.createElement(
        'li',
        { key: index, 'data-index': index },
        _react2.default.createElement(
          'div',
          { className: 'file-left' },
          tempIcon
        ),
        _react2.default.createElement(
          'div',
          { className: 'file-center' },
          processIcon
        ),
        _react2.default.createElement('div', { className: 'file-right' }),
        _react2.default.createElement(
          'div',
          { className: 'upload-mask' },
          _react2.default.createElement(
            'div',
            { className: 'actions-view-file' },
            isRequest ? '' : _react2.default.createElement('div', { className: 'delete-view-file', 'data-index': index, onClick: _this3.deleteFile })
          )
        )
      );
    });
  };

  FormUploader.prototype.getPreviewUrlNode = function getPreviewUrlNode(n) {
    if (n.nodeName == "LI") {
      return n;
    } else {
      return this.getPreviewUrlNode(n.parentNode);
    }
  };

  FormUploader.prototype.trimUrl = function trimUrl(x) {
    return x && x.replace(/^\s+|\s+$/gm, '');
  };
  /***
    li hover上去之后请求另外地址 拿到预览的地址
  **/


  FormUploader.prototype.getPreviewUrl = function getPreviewUrl(path, isdoc, clientUrl) {
    var url = this.props.previewUrl;
    var returnUrl = "";
    if (!isdoc) {
      returnUrl = clientUrl;
    } else {
      if (url && path) {
        // const index = path.indexOf('//') + 2;
        // const keyspace = path.substring(index, path.indexOf('/', index));
        // let paths  = path.split("\/");
        // let name = paths[paths.length - 1];
        // returnUrl = url + window.BSGlobal.tenantInfo.Id + '/preview/' + keyspace + '/' + name;
        returnUrl = url + window.BSGlobal.tenantInfo.Id + '/preview?path=' + path;
      }
    }

    return returnUrl;
  };
  /***
    点击预览
  */


  FormUploader.prototype.clickPreview = function clickPreview(e) {

    var node = this.getPreviewUrlNode(e.target);
    var url = node.getAttribute('data-preview');
    var downloadUrl = node.getAttribute('data-downloadurl');
    var canPreview = node.getAttribute('data-canPreView');
    var type = ['jpeg', 'jpg', 'gif', 'png', 'bmp'];
    if (this.props.onPreviewImg && this.checkImageType(url, type)) {
      this.props.onPreviewImg(url);
    } else if (this.props.uploadType == 'BC_PictureUploader' || canPreview == 'true') {
      // 这里进行判断  其他的文件格式支不支持新页面打开  如果新页面打开不了  则走下载的链接进行下载  
      window.open(url, "_blank");
    } else {
      window.location.href = downloadUrl;
    }
    // let url = this.previewUrl[index];
  };
  // 判断方法是在预览格式支持之内的方法


  FormUploader.prototype.checkImageType = function checkImageType(url, type) {
    var isImage = false;
    var _iteratorNormalCompletion2 = true;
    var _didIteratorError2 = false;
    var _iteratorError2 = undefined;

    try {
      for (var _iterator2 = type[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
        var i = _step2.value;

        if (url.indexOf(i) >= 0) {
          isImage = true;
          break;
        }
      }
    } catch (err) {
      _didIteratorError2 = true;
      _iteratorError2 = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion2 && _iterator2.return) {
          _iterator2.return();
        }
      } finally {
        if (_didIteratorError2) {
          throw _iteratorError2;
        }
      }
    }

    return isImage;
  };
  /*
    渲染 show状态下
   */


  FormUploader.prototype.renderShow = function renderShow() {
    var _this4 = this;

    var _props6 = this.props,
        _props6$hasLoadFile = _props6.hasLoadFile,
        hasLoadFile = _props6$hasLoadFile === undefined ? [] : _props6$hasLoadFile,
        status = _props6.status,
        _props6$readOnly = _props6.readOnly,
        readOnly = _props6$readOnly === undefined ? false : _props6$readOnly,
        hiddenTip = _props6.hiddenTip,
        sideTip = _props6.sideTip;

    var previewText = '';
    var _hasLoadFile = hasLoadFile;
    var response = this.state.response;

    var tempList = void 0;
    if (status == 'edit') {
      tempList = response || [];
    } else {
      tempList = _hasLoadFile && _hasLoadFile.length != 0 ? _hasLoadFile : response || [];
    }
    if (tempList.length == 1) {
      var _temp = tempList[0];
      if (!_temp.ClientUrl && !_temp.DownLoadUrl && !_temp.Name && !_temp.Path) {
        return;
      }
    }
    var imagesType = ['jpeg', 'JPEG', 'jpg', 'JPG', 'gif', 'GIF', 'png', 'PNG', 'bmp', 'BMP'];
    var docType = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt'];
    var temp = imagesType.join('|');
    var doctemp = docType.join('|');
    var reg = new RegExp('(' + temp + ')$', 'i');
    var docreg = new RegExp('(' + doctemp + ')$', 'i');
    var tempIcon = void 0;

    var deleteIcon = status == 'edit' && !readOnly ? _react2.default.createElement('span', { className: 'sys-icon-close' }) : undefined;
    if (tempList.length == 0) return;
    var self = this;
    if (this.props.status == 'show' && this.props.hasLoadFile.length == 0) tempList = [];
    return tempList && tempList.map(function (item, index) {
      var fileName = item.Name;
      var name = item.Name.split('.');
      var isImg = false;
      var isdoc = false;
      if (reg.test(name[name.length - 1])) {
        previewText = '';
        isImg = true;

        if (fileName.indexOf('txt') != -1) {
          var file_icon = fileiconName[name[name.length - 1]] != undefined ? name[name.length - 1] : 'none';
          tempIcon = _react2.default.createElement('span', { className: "file-icon " + 'file-' + file_icon });
        } else {
          tempIcon = _react2.default.createElement('span', { className: 'file-icon file-picture' });
          // tempIcon = <img src={self.translateImage(item.ClientUrl,30)} />;
          //未做压缩处理，暂时已图标代替图片
        }
      } else if (docreg.test(name[name.length - 1])) {
        previewText = '';
        isImg = true;
        isdoc = true;
        var _file_icon = fileiconName[name[name.length - 1]] != undefined ? name[name.length - 1] : 'none';
        tempIcon = _react2.default.createElement('span', { className: "file-icon " + 'file-' + _file_icon });
      } else {
        previewText = _this4.translation.previewDownloadText;

        var _file_icon2 = fileiconName[name[name.length - 1]] != undefined ? name[name.length - 1] : 'none';
        tempIcon = _react2.default.createElement('span', { className: "file-icon " + 'file-' + _file_icon2 });
      }
      // let previewUrl = previewText == '下载' ? item.DownLoadUrl : item.ClientUrl;
      var previewUrl = item.ClientUrl;
      var imgDownloadUrl = item.DownLoadUrl;
      var ifPreview = _this4.checkIsPreviewType(fileName, _this4.props.supportPreviewData);
      var path = item.Path;
      name.pop();

      var preurl = self.getPreviewUrl(path, isdoc, previewUrl);
      if (status == 'edit') {
        var _serachview = "";
        if (isImg) {
          _serachview = _react2.default.createElement('div', { className: 'search-view-file', 'data-preurl': previewUrl, 'data-index': index, onClick: self.clickPreview, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview });
        }
        var deletview = "";
        if (deleteIcon) {
          deletview = _react2.default.createElement('div', { className: 'sys-icon-cus-shanchu', 'data-index': index, onClick: self.deleteFile });
        }
        return _react2.default.createElement(
          'li',
          { key: index, 'data-index': index, 'data-isdoc': isdoc, 'data-clienturl': previewUrl, 'data-preview': preurl, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview },
          _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              'div',
              { className: 'file-left' },
              tempIcon
            ),
            _react2.default.createElement(
              'div',
              { className: 'file-center pic-type' },
              _react2.default.createElement(
                'div',
                { className: 'filenameBox' },
                _react2.default.createElement(
                  _toolTip2.default,
                  { title: item.Name, hidden: hiddenTip, side: sideTip },
                  _react2.default.createElement(
                    'p',
                    { className: 'file-info', 'data-preurl': previewUrl, 'data-index': index, onClick: self.clickPreview, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview },
                    fileName
                  )
                ),
                _react2.default.createElement('span', { className: 'file-line' }),
                _react2.default.createElement('a', { tabIndex: '-1', href: imgDownloadUrl, className: 'file-preview sys-icon-fujian-xiazai', target: '_self' }),
                deletview
              )
            )
          )
        );
      }
      if (!isImg) {
        var _React$createElement;

        var _deletview = "";
        if (deleteIcon) {
          _deletview = _react2.default.createElement('div', { className: 'delete-view-file', 'data-index': index, onClick: self.deleteFile });
        }
        return _react2.default.createElement(
          'li',
          (_React$createElement = { className: 'show-status', key: index, 'data-isdoc': isdoc }, _defineProperty(_React$createElement, 'data-isdoc', isdoc), _defineProperty(_React$createElement, 'data-clienturl', previewUrl), _defineProperty(_React$createElement, 'data-index', index), _defineProperty(_React$createElement, 'data-preview', preurl), _defineProperty(_React$createElement, 'data-downloadurl', imgDownloadUrl), _defineProperty(_React$createElement, 'data-canPreView', ifPreview), _React$createElement),
          _react2.default.createElement(
            'div',
            { className: 'file-left' },
            tempIcon
          ),
          _react2.default.createElement(
            'div',
            { className: 'file-center' },
            _react2.default.createElement(
              'span',
              null,
              _react2.default.createElement(
                'div',
                { className: 'filenameBox' },
                _react2.default.createElement(
                  _toolTip2.default,
                  { title: item.Name, hidden: hiddenTip, side: sideTip },
                  _react2.default.createElement(
                    'p',
                    { className: 'file-info', 'data-preurl': previewUrl, 'data-index': index, onClick: self.clickPreview, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview },
                    fileName
                  )
                ),
                _react2.default.createElement('a', { tabIndex: '-1', href: imgDownloadUrl, className: 'file-preview sys-icon-fujian-xiazai', target: '_self' })
              )
            )
          )
        );
      }if (!isImg) {
        var _deletview2 = "";
        if (deleteIcon) {
          _deletview2 = _react2.default.createElement('div', { className: 'delete-view-file', 'data-index': index, onClick: self.deleteFile });
        }
        return _react2.default.createElement(
          'li',
          { className: 'show-status', key: index, 'data-isdoc': isdoc, 'data-clienturl': previewUrl, 'data-index': index, 'data-preview': preurl, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview },
          _react2.default.createElement(
            'div',
            { className: 'file-left' },
            tempIcon
          ),
          _react2.default.createElement(
            'div',
            { className: 'file-center' },
            _react2.default.createElement(
              _toolTip2.default,
              { title: item.Name, hidden: hiddenTip, side: sideTip },
              _react2.default.createElement(
                'span',
                null,
                _react2.default.createElement(
                  'div',
                  { className: 'filenameBox' },
                  _react2.default.createElement(
                    'p',
                    { className: 'file-info' },
                    fileName
                  )
                )
              )
            )
          ),
          _react2.default.createElement(
            'div',
            { className: 'upload-mask' },
            _react2.default.createElement(
              'div',
              { className: 'actions-view-file' },
              _react2.default.createElement('a', { tabIndex: '-1', href: imgDownloadUrl, className: 'file-preview download-view-file', target: '_self' }),
              _deletview2
            )
          )
        );
      }
      if (deleteIcon == undefined) {
        var _serachview2 = "";
        if (isImg) {
          _serachview2 = _react2.default.createElement('div', { className: 'search-view-file', 'data-index': index, 'data-preurl': previewUrl, onClick: self.clickPreview, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview });
        }
        return _react2.default.createElement(
          'li',
          { className: 'show-status', key: index, 'data-isdoc': isdoc, 'data-clienturl': previewUrl, 'data-index': index, 'data-preview': preurl, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview },
          _react2.default.createElement(
            'div',
            { className: 'file-left' },
            tempIcon
          ),
          _react2.default.createElement(
            'div',
            { className: 'file-center' },
            _react2.default.createElement(
              'span',
              null,
              _react2.default.createElement(
                'div',
                { className: 'filenameBox' },
                _react2.default.createElement(
                  _toolTip2.default,
                  { title: item.Name, hidden: hiddenTip, side: sideTip },
                  _react2.default.createElement(
                    'p',
                    { className: 'file-info', 'data-preurl': previewUrl, 'data-index': index, onClick: self.clickPreview, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview },
                    fileName
                  )
                ),
                _react2.default.createElement('a', { tabIndex: '-1', href: imgDownloadUrl, className: 'file-preview sys-icon-fujian-xiazai', target: '_self' })
              ),
              _react2.default.createElement(
                'p',
                { className: 'file-downIcon' },
                previewText
              )
            )
          )
        );
      }

      var serachview = "";
      if (isImg) {
        serachview = _react2.default.createElement('div', { className: 'search-view-file', 'data-index': index, onClick: self.clickPreview, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview });
      }
      return _react2.default.createElement(
        'li',
        { className: 'show-status', key: index, 'data-isdoc': isdoc, 'data-clienturl': previewUrl, 'data-index': index, 'data-preview': preurl, 'data-downloadurl': imgDownloadUrl, 'data-canPreView': ifPreview },
        _react2.default.createElement(
          'div',
          { className: 'file-left' },
          tempIcon
        ),
        _react2.default.createElement(
          'div',
          { className: 'file-center' },
          _react2.default.createElement(
            _toolTip2.default,
            { title: item.Name, hidden: hiddenTip, side: sideTip },
            _react2.default.createElement(
              'span',
              null,
              _react2.default.createElement(
                'p',
                { className: 'file-info' },
                fileName
              ),
              previewText
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'upload-mask' },
          _react2.default.createElement(
            'div',
            { className: 'actions-view-file' },
            serachview,
            _react2.default.createElement('a', { tabIndex: '-1', href: imgDownloadUrl, className: 'file-preview download-view-file', target: '_self' })
          )
        )
      );
    });
  };

  FormUploader.prototype.componentWillMount = function componentWillMount() {
    if (this.props.hasLoadFile && this.props.hasLoadFile.length != 0) {
      this.state.response = _extends([], this.props.hasLoadFile);
      this.setState(this.state);
    }
  };

  FormUploader.prototype.componentDidMount = function componentDidMount() {
    if (this.state.isDrag && this.props.status == 'edit') {
      this.dragFile('uploadEdit');
    }
    if (this.props.status == 'edit') {
      var _id = 'uploader-input-' + this.tempRank;
      var btn = document.getElementById(_id);
      if (btn) {
        btn.addEventListener('click', function () {
          this.value = '';
        }, false);
      }
    }
    document.addEventListener('keydown', this.handleKeyDown);
  };

  FormUploader.prototype.componentWillUnmount = function componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown);
  };

  FormUploader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (nextProps.status != this.props.status && nextProps.hasLoadFile && nextProps.hasLoadFile.length != 0 || nextProps.hasLoadFile && nextProps.hasLoadFile.length != 0 && nextProps.hasLoadFile.length > this.state.response.length || JSON.stringify(nextProps.hasLoadFile) != JSON.stringify(this.props.hasLoadFile)) {
      this.state.response = _extends([], nextProps.hasLoadFile);
    }
    if (nextProps.isDrag != this.props.isDrag) this.state.isDrag = nextProps.isDrag;
    console.log(this.state.response);
    this.setState(this.state);
  };
  /*xuqian
  弹窗组件的显示隐藏状态设置
  */


  FormUploader.prototype.renderErrorMessage = function renderErrorMessage() {
    return _react2.default.createElement(
      'p',
      { className: 'error-message' },
      this.state.errorShow.messages
    );
  };

  FormUploader.prototype.renderMessage = function renderMessage() {
    if (this.state.currentFileList.length != 0 || this.props.hasLoadFile.length != 0) return;
    if (this.props.uploadType == 'BC_PictureUploader') {
      return _react2.default.createElement(
        'p',
        { className: 'error-message' },
        this.props.errorMessage.message
      );
    } else {
      return _react2.default.createElement(
        'p',
        { className: 'error-message' },
        this.props.errorMessage.message
      );
    }
  };

  FormUploader.prototype.render = function render() {
    var _props7 = this.props,
        hidden = _props7.hidden,
        status = _props7.status,
        _props7$readOnly = _props7.readOnly,
        readOnly = _props7$readOnly === undefined ? false : _props7$readOnly,
        lablePos = _props7.lablePos,
        hasLoadFile = _props7.hasLoadFile;

    var rightStyle = {};
    if (lablePos && status !== 'show') {
      rightStyle = { 'float': 'left', 'width': 'calc(100% - 118px)' };
    }
    if (!hidden) {
      var fileAdd = status == 'edit' && !readOnly ? this.renderEditBtn() : undefined;
      var filesUlClass = status == 'edit' ? 'form-uploader-edit' : 'form-uploader-show';
      return _react2.default.createElement(
        'div',
        { className: "form-item formUploader " + (status == 'show' ? ' form-item_is-static' : '') + (!lablePos ? ' form-uploader__title-up-and-down ' : '') },
        _react2.default.createElement(_commonLabel2.default, this.props),
        _react2.default.createElement(
          'div',
          { id: 'field-right', className: 'field-right', style: rightStyle },
          status == 'show' && (hasLoadFile.length == 0 || hasLoadFile[0].Name == '') ? _react2.default.createElement(
            'div',
            { className: 'empty-style' },
            this.translation.emptyText
          ) : '',
          fileAdd,
          this.renderHelpText(),
          _react2.default.createElement(
            'div',
            { className: 'uploader-files' },
            _react2.default.createElement(
              'ul',
              { className: filesUlClass + ' clearfix', ref: 'progressCon' },
              this.renderShow(),
              this.renderCurrentFile()
            )
          ),
          status == 'edit' && !this.state.errorShow.type && this.props.errorMessage.error ? this.renderMessage() : '',
          status == 'edit' && this.state.errorShow.type ? this.renderErrorMessage() : ''
        )
      );
    } else {
      return _react2.default.createElement('div', null);
    }
  };

  FormUploader.prototype.handleKeyDown = function handleKeyDown(e) {
    var focusableUploadBtn = this.refs.focusableUploadBtn,
        formUploader = this.refs.formUploader;

    switch (e.keyCode) {
      case 13:
        // 回车
        if (e.target == focusableUploadBtn) {
          formUploader.click();
        }
        break;
      case 9:
        // tab
        break;
      case 38:
        // 上
        break;
      case 40:
        // 下
        break;
      case 37:
        // 左
        break;
      case 39:
        // 右
        break;
      case 27:
        // esc
        break;
      default:
        // console.info(e);
        break;
    }
  };

  return FormUploader;
}(_react.Component);

FormUploader.defaultProps = {
  hiddenTip: false,
  sideTip: false
};


module.exports = FormUploader;