UploadFile.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Upload, Icon, Modal,Button,Input,notification} from 'antd'
import styles from './UploadFile.less'

const getFileList = (files) => {
  if (Array.isArray(files)) {
    return files.map((item, key) => {
      const urlArr = item.url.split('/')
      return { url: item.url, id: item.id, uid: key,key:item.key,name: urlArr[urlArr.length - 1], status: 'done' }
    })
  }
  if (files && !!files.length) {
    const filesArr = files.split('/')
    return [{ uid: -1, url: files, name: filesArr[filesArr.length - 1], status: 'done' }]
  }
  return ''
}

function renderAccecpt (accept) {
  if (!accept) {
    return null
  }
  if (['image', 'video', 'audio'].find(ext => ext === accept)) {
    return `${accept}/*`
  }
  if (accept === 'zip') {
    return 'application/zip,application/x-zip,application/x-zip-compressed'
  }
  return `.${accept}`
}

class UploadFiles extends Component {
  static propTypes = {
    files: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
    onUpload: PropTypes.func.isRequired,
    multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    disabled: PropTypes.bool,
    path: PropTypes.string,
    accept: PropTypes.string,
  }
  constructor (props) {
    super(props)
    this.state = {
      previewVisible: false,
      previewImage: '',
      files: getFileList(props.files),
      webpicVisible:false,
      weburl:''
    }
  }

  componentWillReceiveProps (nextProps) {
    if (Array.isArray(this.props.files) && !this.props.files.length && !!nextProps.files.length) {
      this.setState({ files: getFileList(nextProps.files) })
    }
  }
  showWebPic=()=>{
    this.setState({webpicVisible:true})
  }
  picInputChange=(e)=>{
    this.setState({weburl:e.target.value})
  }
  useWebPic=()=>{
    const {weburl,files} = this.state;
    const ishttp=weburl.indexOf('http')>-1;
    const isimg =weburl.indexOf('.jpg')>-1||weburl.indexOf('.png')||weburl.indexOf('.jepg')>-1;
    if(!ishttp||!isimg){
      return notification.error({message: '添加失败',description:"非法链接"});
    }
    let newFiles = [];
    const obj={uid:files.length+1,id:files.length+1,url:weburl,key:weburl.split('.com')[1],status:'done'};
    newFiles.push(obj);
    this.props.onUpload(obj);
    this.setState({files:newFiles,webpicVisible:false})
  }
  render () {
    const { previewVisible, webpicVisible,previewImage,files} = this.state
    const { multiple = 1,showWeb,onUpload,onRemove, disabled,data,path, accept } = this.props
    const renderFiles = (fileList) => {
      const newFiles = fileList.map((file) => {
        return file.response ? {id:file.response.data.id,url:file.response.data.url,key:file.response.data.key} : file
      })
      if (multiple === 1) {
        return newFiles[0]
      }
      return newFiles
    }
    //post url
    let actionUrl = `${API_URL}/file`
    if (path) {
      actionUrl += `&path=${path}`
    }
    const uploadProps = {
      accept: renderAccecpt(accept),
      action: actionUrl,
      headers: {
        'X-Requested-With': null,
      },
      data:data,
      disabled,
      listType: 'picture-card',
      fileList: files,
      multiple: multiple === true,
      onPreview: (file) => {
        this.setState({
          previewImage: file.url || file.thumbUrl,
          previewVisible: true,
        })
      },
      beforeUpload: () => {
        return true
      },
      onChange: ({ file, fileList }) => {
        this.setState({ files: fileList })
        if (file.percent === 100 && file.status === 'done') {
          onUpload(renderFiles(fileList, 1))
        }
      },
      onRemove: (file) => {
        let fileKey;
        const {response,key} = file;
        fileKey=key;
        if(response){
          fileKey=response.data.key;
        }
        if (disabled) {
          return false
        }
        const fileList = this.state.files.filter(item => item.uid !== file.uid)
        onUpload(renderFiles(fileList, 0))
        onRemove(fileKey);
        return true
      },
    }
    const modalProps = {
      visible: previewVisible,
      footer: null,
      onCancel: () => this.setState({ previewVisible: false }),
    }
    const modalPropsPic = {
      title:'添加网络图片',
      visible: true,
      onCancel: () => this.setState({webpicVisible:false}),
      onOk:()=>this.useWebPic()
    }
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">本地上传</div>
      </div>
    )
    return (
      <div className="clearfix">
        <Upload {...uploadProps}>
          {multiple === true ? uploadButton : (files.length < multiple && uploadButton)}
        </Upload>
        {showWeb&&<Button icon="plus" onClick={this.showWebPic}>网络图片</Button>}
        <Modal {...modalProps}>
          <img className={styles.previewImage} src={previewImage} />
        </Modal>
        {webpicVisible&&<Modal {...modalPropsPic} >
            <Input placeholder="输入图片链接..." onChange={this.picInputChange} style={{width:'100%'}}/>
        </Modal>}  
      </div>
    )
  }
}

export default UploadFiles