使用 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}  //
            >
        )
    }

}
複製代碼