【上传组件】react-dropzone-component VS react-filepond

1. react-dropzone-component

---

 

写一个名为MultiFilesUpload.js组件

// @flow
import React from 'react';
import Dropzone from 'react-dropzone-component';
import { Button, Icon } from 'semantic-ui-react';
import { withAlert } from 'react-alert';
import withFetch from './hoc/withFetch';

type Props= {
  uploadUrl: string,
  disabled: boolean,
  minHeight?: string,
  message: string,
  fileType: string,
  hideBtn: boolean, // 是否隐藏按钮
  maxFiles: number, // 上传的最大文件数
  contentFiles: number, // 上传的当前文件数
  alert: () => void,
  alerts: () => void,
  acceptedFiles: string, // 限制文件格式
  btnMeg?: string, // 按钮的文案, 默认为上传
  btnClassName: string, // 按钮的类名， 支持父元素传递的样式
  onFileUploaded: (result: Object) => void,
  onFileDeleted: (file: Object) => void,
  onLoading: (onLoading: boolean) => void,
}

type State= {
  onLoading: boolean,
}

export class MultiFilesUpload extends React.PureComponent<Props, State> {
  defaultProps: Props
  maxFilesExceeded: (file: Object) => void
  handleUpload: Function
  handleRemove: (file: Object) => void
  eventHandlers: Object
  dropzone: Object
  djsConfig: Object

  static defaultProps = {
    uploadUrl: 'k2data.com',
    minHeight: '36px',
    maxFiles: 60,
    disabled: false,
    btnMeg: '上传',
  }

  constructor(props: Props) {
    super(props);

    this.state = {
      onLoading: false,
    };

    this.maxFilesExceeded = this.maxFilesExceeded.bind(this);
    this.handleUpload = this.handleUpload.bind(this);
    this.handleRemove = this.handleRemove.bind(this);
    this.djsConfig = {
      autoProcessQueue: false,
      addRemoveLinks: true,
      acceptedFiles: this.props.acceptedFiles,
      maxFiles: props.maxFiles,
      dictRemoveFile: '删除文件',
    };
    this.eventHandlers = {
      init: (dropzone) => { this.dropzone = dropzone; },
      // maxfilesexceeded: this.maxFilesExceeded,
      addedfile: this.handleUpload,
      removedfile: this.handleRemove,
    };
  }

  maxFilesExceeded(file: Object) {
    this.dropzone.removeFile(file);
    if (this.props.alert) {
      this.props.alert.error('达到最大上传文件数', {
        timeout: 3000,
      });
    } else {
      this.props.alerts.error('达到最大上传文件数', {
        timeout: 3000,
      });
    }
  }

  handleUpload = async (file) => {
    const {
      onFileUploaded, fileType = 'contract', contentFiles, maxFiles,
    } = this.props;
    // 限制文件大小
    // if (size > 300000) {
    //   this.props.alert.error('上传文件大小超限');
    //   return;
    // }
    // 到达最大个数后不执行上传
    if (file.name.indexOf('&') !== -1 || file.name.indexOf('/') !== -1 || file.name.indexOf('\\') !== -1) {
      if (this.props.alert) {
        this.props.alert.error('不能含有特殊字符"&"/""\\"');
      } else {
        this.props.alerts.error('不能含有特殊字符"&"/""\\"');
      }
      return;
    }
    if (contentFiles && contentFiles >= maxFiles) {
      if (this.props.alert) {
        this.props.alert.error('达到最大上传文件数');
      } else {
        this.props.alerts.error('达到最大上传文件数');
      }
      return;
    }
    this.setState({ onLoading: true });
    if (this.props.onLoading) {
      this.props.onLoading(true);
    }
    const data = new FormData();
    data.append(`${fileType}`, file);
    const body = {
      method: 'POST',
      body: data,
    };
    const { fetchWithUser, handleFetchError } = this.props;
    try {
      const json = await fetchWithUser(this.props.uploadUrl, body);
      // eslint-disable-next-line
      file.response = json
      if (typeof onFileUploaded === 'function') {
        onFileUploaded(json);
        this.setState({ onLoading: false });
        if (this.props.onLoading) {
          this.props.onLoading(false);
        }
      }
    } catch (e) {
      const mes = `上传失败：${e.message}`;
      if (this.props.alert) {
        this.props.alert.error(mes, {
          timeout: 3000,
        });
      } else {
        this.props.alerts.error(mes, {
          timeout: 3000,
        });
      }
      this.setState({ onLoading: false });
      if (this.props.onLoading) {
        this.props.onLoading(false);
      }
      handleFetchError(e);
    }
  }

  handleRemove(file: Object) {
    const { onFileDeleted } = this.props;
    if (typeof onFileDeleted === 'function') {
      onFileDeleted(file.response);
    }
  }

  render() {
    const {
      minHeight, message, disabled, btnMeg, btnClassName, hideBtn,
    } = this.props;
    const { onLoading } = this.state;
    return (
      <div className="fileInputCon">
        <div style={{ position: 'relative', display: 'inline-block' }}>
          {
            hideBtn ? ''
            : (<Button
              basic
              className={btnClassName || 'uploadBtn'}
              disabled={disabled || onLoading}
            >
              {btnMeg}
              {
                !hideBtn && onLoading
                ? <Icon name="spinner" className="splnnerLoading" />
                : ''
              }
            </Button>)
          }
          {
            // !hideBtn && onLoading
            // ? <div className="upload-loader"><Loader active /></div>
            // : ''
          }
          {
            disabled || onLoading ? '' : (
              <div className="container">
                <Dropzone
                  accept="image/jpeg, image/png"
                  eventHandlers={this.eventHandlers}
                  config={{
                    showFiletypeIcon: true,
                    postUrl: 'no-url',
                  }}
                  djsConfig={this.djsConfig}
                />
              </div>
            )
          }
        </div>
        <span className="updataMes">{message}</span>
        <style jsx>{`
            .fileInputCon{
              position: relative;
              display: inline-block;
            }
            .container {
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              opacity: 0;
            }
            .updataMes{
              color: #999;
              font-size: 12px;
            }
            .container :global(.filepicker.dropzone) {
              position: relative;
              text-align: center;
              padding: 10px;
              border: 1px dashed rgba(0,0,0,.1);
              border-radius: 4px;
              background: transparent;
              min-height: ${minHeight || '36px'};
              pointer-events: ${disabled ? 'none' : 'auto'};
            }
            .container :global(
              .dropzone .dz-preview.dz-error .dz-error-message,
              .dropzone .dz-preview.dz-error .dz-error-mark,
              .dropzone .dz-preview .dz-progress,
              .container .dropzone .dz-message,
              .dropzone .dz-preview
            ) {
              display: none;
            }
        `}
        </style>
        <style global jsx>{`
            button.ui.button.uploadBtn {
              color: #009edc!important;
              border: 1px solid #009edc;
              box-shadow: none;
              padding: 8px 0;
              width: 100px;
            }
            @keyframes button-spin {
              from {
                -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
              }
              to {
                -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);
              }
            }
            i.icon.splnnerLoading{
              margin-left: 5px!important;
              -webkit-animation: button-spin 0.8s linear;
              animation: button-spin 0.8s linear;
              -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
            }
        `}
        </style>
      </div>
    );
  }
}

export default withFetch(withAlert(MultiFilesUpload));

页面中使用

import MultiFilesUpload from '../MultiFilesUpload';


<MultiFilesUpload
     uploadUrl={`${env.SERVICE_URL}/services/upload`}
     message="（建议尺寸100px*100px）"
     fileType="file"
     disabled={coverImg}
     acceptedFiles="image/*"
     onFileUploaded={this.handleCoverUpload}
     onFileDeleted={this.handleCoverDelete}
     maxFiles={1}
     contentFiles={coverImg ? 1 : 0}
    />

2. react-filepond

---

 

写一个Filepond.js组件

// @flow
import React from 'react';
import { FilePond, File } from 'react-filepond';
import { connect } from 'react-redux';
import { withAlert } from 'react-alert';

type Props = {
  uploadUrl: string,
  token: string,
  fileType: string,
  deletUrl: string,
  onUploaded: Function,
  files: Array<Object>,
  onError?: Function,
  message?: string,
  alert: Object,
  onFileUploaded: Function, // 上传功能后执行的函数
}

type State = {
  files: Array<File>,
  progress: number,
}

export class FilepondUpload extends React.PureComponent<Props, State> {
  pond: any
  state = {
    files: [],
    progress: 1,
  }

  onprocessfileprogress = (file, progress) => {
    const { onUploaded } = this.props;
    this.setState({ progress });
    setTimeout(() => {
      if (onUploaded && progress === 1) {
        onUploaded();
      }
    }, 1000);
  }

  uploadConfig() {
    const { uploadUrl, token, deletUrl } = this.props;
    return {
      url: '',
      process: {
        url: uploadUrl,
        withCredentials: false,
        headers: {
          Authorization: `Bearer ${token}`,
        },
        onload: this.onload,
        onerror: this.onerror,
      },
      revert: {
        url: deletUrl,
        withCredentials: false,
        headers: {
          Authorization: `Bearer ${token}f`,
        },
      },
    };
  }

  onload = (e) => {
    console.log('上传成功后的response', e);
    if (this.props.onFileUploaded) {
      this.props.onFileUploaded(JSON.parse(e));
    }
  }
  onerror = (e) => {
    console.log('上传失败后的response', e);
  }


  handleError = (e) => {
    this.setState({ progress: 1 });
    if (this.props.onError) {
      this.props.onError(e);
    }
  }

  addFile = (e, file) => {
    const { filename } = file;
    if (filename.indexOf('&') !== -1 || filename.indexOf('/') !== -1 || filename.indexOf('\\') !== -1) {
      this.props.alert.error('不能含有特殊字符"&"/""\\"');
      file.abortProcessing();
      file.abortLoad();
      return null;
    }
  }
  processFile = (file) => {
    const { filename } = file;
    if (filename.indexOf('&') !== -1 || filename.indexOf('/') !== -1 || filename.indexOf('\\') !== -1) {
      file.abortProcessing();
      file.abortLoad();
      return null;
    }
  }

  render() {
    const { files, progress } = this.state;
    const { fileType, message = '上传合同' } = this.props;
    const { onprocessfileprogress } = this;
    return (
      <div className="container-wraper">
        <div className="container">
          <div className="progress" >
            <progress value={progress} max="1" className="progress-bar" />
            <span>{parseInt(progress * 100, 10)}%</span>
          </div>
          <div className="upload">
            <FilePond {...{
              maxFiles: 100,
              labelIdle: message,
              server: this.uploadConfig(),
              name: fileType,
              allowMultiple: true,
              allowRevert: false,
              instantUpload: true,
              onprocessfileprogress,
              onerror: this.handleError,
              onaddfile: this.addFile,
              onprocessfilestart: this.processFile,
            }}
            >
              {files.map(file => (<File source={file} key={file} />))}
            </FilePond>
          </div>
        </div>

        <style jsx>{`
          .container-wraper {
            display: inline-block;
            width: 130px;
            height: 40px;
            cursor: pointer;
          }
          .container {
            position: relative;
          }
          .progress {
            position: absolute;
            top: 2px;
            line-height: 32px;
            z-index: ${progress === 1 ? 1 : 10};
            opacity: ${progress === 1 ? 0 : 1};
            height: 32px;
            width: 123px;
            left: 2px;
            background-color: white;
          }
          .progress-bar {
            width: 90px;
            transform: translateY(3px);
          }
          .upload {
            position: absolute;
            top: 0;
            z-index: 2;
            height: 33px;
          }
          .upload :global(.filepond--list-scroller) {
            transform:translate3d(0px, 34px, 0) !important;
            opacity: 0;
          }
          .upload:active{
            background: #009edc;
          }
          .text {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
          }
        `}
        </style>
        <style jsx global>{`
          .filepond--root {
            height: 35px !important;
            overflow: hidden;
            border: 1px solid #009edc;
            width: 126px;
            z-index: 2;
            border-radius: 2px !important;
          }
          .filepond--browser {
            display: none;
          }
          .filepond--drop-label {
            opacity: 1 !important;
            transform: translate3d(0px, 0, 0) !important;
            visibility: visible !important;
            cursor: pointer;
            pointer-events: auto !important; // FIXME: allow multiple upload one by one
          }
          .filepond--drop-label label {
            line-height: 33px;
            padding: 0;
          }
          .filepond--drop-label label {
            cursor: pointer;
          }
          .filepond--drop-label label:active {
            color: white;
          }
          .filepond--file-action-button {
            cursor: pointer;
          }
          .filepond--drip, .filepond--drop-label, .filepond--panel {
            background: transparent !important;
            border-radious: 0;
            color: #009edc;
          }
          .filepond--drip, .filepond--panel-root {
            display: none;
          }
        `}
        </style>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  token: state.user.token,
});

export default withAlert(connect(mapStateToProps, {})(FilepondUpload));

页面中使用

import FilepondUpload from './Filepond';

<FilepondUpload
  uploadUrl={UPLOAD_URL}
  message="上传合同"
  fileType="contract"
  onUploaded={onUploaded}
  onError={this.repeatFileName}
  />