使用 antd 的 Upload 远程上传文件

import React, { Component，Modal } from 'react'
import { Upload } from 'antd'
class Upload extends Component {
    constructor (props) {
        super(props)
        this.state = {
         fileList: []  //已上传的文件列表 
        }
        this.fileUrl = '' // 服务端在服务器上存储的文件地址
      }
      
    // 删除已上传文件的回调函数
    onRemove = () => {
        this.setState({
          fileList: []
        })
        this.fileUrl = ''
    }
    
    // 用于对上传文件的检查，例如上传课件检查后缀名
      beforeUploadFile = (file) => {
        const name = file.name
        const fileType = name.slice(name.lastIndexOf('.') + 1)
        if (['pdf', 'PDF', 'KEY', 'key' ].indexOf(fileType) === -1) {
          Modal.warning({
            title: '只容许上传后缀名为ppt，pptx，key，pdf的文件',
            onOk: () => {
              this.setState({
                fileList: []
              })
            }
          })
          return false
        }
        return true
      }
      
     // 上传文件改变时的状态函数 
     upLoadFileChange = (data) => {
        const { file } = data
        if (file.status === 'removed') return 
        // *********很重要！！！antd 删除会触发change，因此必定要判断一下，是状态是不是removed
        //很容易出现，删除后又被赋值的现象，这个错误被坑了两次
        if (file.status === 'done') {
          this.fileUrl = file.response.msg //服务端接口返回的文件地址
        }
        this.setState({
          fileList: [file]
        })
    }
    
    render () {
        return (
            <Upload
                action="服务端上传文件的接口地址"
                name="upload"
                fileList={fileList}
                beforeUpload={this.beforeUploadFile}
                onChange={this.upLoadFileChange}
                onRemove={this.onRemove}  //
            >
        )
    }

}
复制代码