forgeplus-react/src/forge/Source/Upload.jsx

import React, { useEffect, useState } from "react";
import { Upload, Button } from 'antd';
import { appendFileSizeToUploadFileAll } from 'educoder';

import axios from 'axios';
function Uploads({ className , size , actionUrl,fileList,showNotification , load}) {
  const [ files , setFiles ] = useState(undefined);

  useEffect(()=>{
    if(fileList){
      init();
    }
  },[fileList]);

  function init(){
    let f = appendFileSizeToUploadFileAll(fileList);
    setFiles(f);
  }
  function onAttachmentRemove(file){
    if (!file.percent || file.percent === 100) {
      deleteAttachment(file);
      return false;
    }
  }
  function deleteAttachment(file){
    let id = file.response && file.response.data && file.response.data.id;
    const url = actionUrl + `/busiAttachments/${id}`;
    axios.delete(url).then((response) => {
      if (response.data) {
        if (response.data.code === "1") {
          let nf = files.filter(item=>item.response.data.id !== id);
          setFiles(nf);
          fileIdList(nf);
        } else {
          showNotification(response.data.message)
        }
      }
    }).catch(function (error) {
      console.log(error);
    });
  }


  function handleChange (info) {
    if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
      let fileList = info.fileList;
      let len = info.fileList && info.fileList.length;
      setFiles(appendFileSizeToUploadFileAll([fileList[len-1]]));
      fileIdList(fileList[len-1]);
    }
  }

  function fileIdList (fileList) {
    let data = fileList.response && fileList.response.data;
    fileList && load && load(data && data.id,data && data.fileName);
  }

  function beforeUpload(file){
    const isLt100M = file.size / 1024 / 1024 < size;
    if (!isLt100M) {
      showNotification(`文件大小必须小于${size}MB!`);
    }
    return isLt100M;
  }

  const upload = {
    name: 'file',
    fileList: files,
    action: actionUrl+`/busiAttachments/upload`,
    onChange:handleChange,
    onRemove:onAttachmentRemove,
    beforeUpload:beforeUpload,
    maxCount:1
  };
  return (
    <Upload {...upload} className={className}>
      <Button type={"default"}>上传文件</Button>
      <span className="ml10 color-grey-9">(你可以上传小于<span className="color-red">{size}MB</span>的文件)</span>
    </Upload>
  )
}
export default Uploads;