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} //
>
)
}
}
复制代码