forgeplus-react/src/forge/Upload/Index.js

import React, { Component } from "react";
import { Upload, Icon , Button } from 'antd';
import { getUploadActionUrl, appendFileSizeToUploadFileAll } from 'educoder';

import axios from 'axios';
const { Dragger } = Upload;
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: undefined,
    }
  }
  componentDidMount=()=>{
    const {defaultFileList} = this.props;
    if(defaultFileList){
      const files = [];
      defaultFileList.map(i=>{
        files.push({
          uid: i.id,
          name: i.title,
          status: 'done',
          url: i.url
        })
      })
      this.setState({fileList: files})
    }
    this.checkInitFile();
  }
  componentDidUpdate=(prevProps)=>{
    if(prevProps && prevProps.fileList !== this.props.fileList){
      this.checkInitFile();
    }
  }
  checkInitFile=()=>{
    const { fileList } = this.props;
    if(fileList && fileList.length>0){
      this.setState({ fileList: appendFileSizeToUploadFileAll(fileList) });
    }
  }

  onAttachmentRemove = (file) => {
    if (!file.percent || file.percent === 100) {
      this.deleteAttachment(file)
      return false;
    }
  }

  deleteAttachment = (file) => {
    const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
    axios.delete(url, {
    }).then((response) => {
      if (response.data) {
        if (response.data.status === 0) {
          this.setState((state) => {
            const index = state.fileList.indexOf(file);
            const newFileList = state.fileList.slice();
            newFileList.splice(index, 1);
            return {
              fileList: newFileList,
            };
          },()=>{
            this.fileIdList(this.state.fileList);
          });
        } else {
          this.props.showNotification(response.data.message)
        }
      }
    }).catch(function (error) {
      console.log(error);
    });
  }


  handleChange = (info) => {
    const { changeIsComplete } = this.props;
    changeIsComplete && changeIsComplete(true);
    if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
      let fileList = info.fileList;
      this.setState({ fileList: appendFileSizeToUploadFileAll(fileList) });
      this.fileIdList(fileList);
    }
  }

  fileIdList = (fileList) => {
    let array = [];
    if(fileList && fileList.length > 0){
      fileList.map((item) => {
        return item.response && item.status==="done" && array.push((item.response.id || (item.response.data && item.response.data.id)));
      })
      array && array.length>0 && this.props.load(array);
    }else{
      this.props.load([]);
    }
  }

  checkFile=(str)=>{
    const filestr = ['.rar','.iso',".flv", ".rmvb", ".mmf", ".ape", ".vsdx", ".msi",".md"];
    let flag = false;
    for(var i= 0;i<filestr.length;i++){
      let reg = new RegExp("(.+(?=["+filestr[i]+"]$))");
      flag = reg.test(str);
      if(flag){
        return flag;
      }
    }
    return false;
  }

  beforeUpload = (file) => {
    // 不对类型进行校验
    // if(file && !file.type){
    //   let flag = this.checkFile(file.name);
    //   if(!flag){
    //     this.props.showNotification(`暂不支持此格式文件的上传!`);
    //     return false;
    //   }
    // }
    const { size } = this.props;
    const isLt100M = file.size / 1024 / 1024 < size;
    if (!isLt100M) {
      this.props.showNotification(`文件大小必须小于${size}MB!`);
    }
    return isLt100M;
  }

  render() {
    //判断是否已经提交，如已提交评论则上一条评论数据清除
    const { isComplete, icon , btn , className , size , actionUrl } = this.props;
    const { fileList } = this.state;

    let list = isComplete === true ? fileList : undefined;
    const upload = {
      name: 'file',
      fileList: list,
      action: actionUrl || `${getUploadActionUrl()}`,
      onChange: this.handleChange,
      onRemove: this.onAttachmentRemove,
      beforeUpload: this.beforeUpload,
      multiple:true
    };

    return (
      btn ? 
      <Upload {...upload} className={className}>
        <Button type={"default"}>上传文件</Button>
        <span className="ml10 color-grey-9">(你可以上传小于<span className="color-red">{size}MB</span>的文件)</span>
      </Upload>
      :
      <Dragger {...upload} className={className}>
        {icon || <Icon type="inbox" />}
        <p className="ant-upload-text font-16 color-grey-3">拖动文件或点击此处上传</p>
      </Dragger>
    )
  }
}
export default Index;