| | |
| | | import { Upload, Button, Icon, Progress, notification } from 'antd' |
| | | import SparkMD5 from 'spark-md5' |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | | import './index.scss' |
| | | |
| | | let service = '' |
| | |
| | | |
| | | state = { |
| | | percent: 0, |
| | | showprogress: false |
| | | showprogress: false, |
| | | filelist: [] |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { value } = this.props |
| | | if (!value) return |
| | | |
| | | this.setState({filelist: fromJS(value).toJS()}) |
| | | } |
| | | |
| | | onChange = ({ fileList }) => { |
| | | const { onChange } = this.props |
| | | fileList = fileList.map(item => { |
| | | if (item.status === 'error' && /^<!DOCTYPE html>/.test(item.response)) { |
| | | item.response = '' |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | if (onChange) { |
| | | onChange([...fileList]) |
| | | } |
| | | this.setState({filelist: fileList}) |
| | | this.props.onChange(fileList) |
| | | } |
| | | |
| | | onRemove = file => { |
| | | const { value, onChange } = this.props |
| | | const files = this.state.filelist.filter(v => v.uid !== file.uid) |
| | | |
| | | const files = value.filter(v => v.url !== file.url) |
| | | |
| | | if (onChange) { |
| | | onChange(files) |
| | | } |
| | | this.setState({filelist: files}) |
| | | this.props.onChange(files) |
| | | } |
| | | |
| | | onUpdate = (url) => { |
| | | const { value, onChange } = this.props |
| | | let filelist = fromJS(this.state.filelist).toJS() |
| | | |
| | | let filelist = fromJS(value).toJS() |
| | | filelist[filelist.length -1].status = 'done' |
| | | filelist[filelist.length -1].response = url |
| | | filelist[filelist.length -1].origin = false |
| | | |
| | | if (onChange) { |
| | | onChange([...filelist]) |
| | | if (filelist[filelist.length -1]) { |
| | | filelist[filelist.length -1].status = 'done' |
| | | filelist[filelist.length -1].response = url |
| | | filelist[filelist.length -1].origin = false |
| | | } |
| | | |
| | | this.setState({filelist}) |
| | | this.props.onChange(filelist) |
| | | } |
| | | |
| | | onDelete = (msg) => { |
| | | const { value, onChange } = this.props |
| | | let filelist = value.filter(v => !v.url && !v.response) |
| | | let filelist = this.state.filelist.filter(v => !v.url && !v.response) |
| | | |
| | | if (onChange) { |
| | | onChange([...filelist]) |
| | | } |
| | | |
| | | this.setState({ |
| | | showprogress: false |
| | | }) |
| | | this.setState({filelist, showprogress: false}) |
| | | this.props.onChange(filelist) |
| | | |
| | | notification.warning({ |
| | | top: 92, |
| | |
| | | }) |
| | | } |
| | | |
| | | getuuid = () => { |
| | | let uuid = [] |
| | | let _options = '0123456789abcdefghigklmnopqrstuv' |
| | | for (let i = 0; i < 19; i++) { |
| | | uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1)) |
| | | } |
| | | uuid = uuid.join('') |
| | | return uuid |
| | | } |
| | | |
| | | beforeUpload = (file) => { |
| | | const { accept } = this.props |
| | | |
| | |
| | | params.file.fileChunks = chunks // 记录所有chunks的长度 |
| | | |
| | | if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) { // 文件名称含有英文及数字之外字符时,名称系统生成 |
| | | params.file.fileName = moment().format('YYYYMMDDHHmmss') + Utils.getuuid().substr(14) |
| | | params.file.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid() |
| | | } |
| | | |
| | | totalFileReader.readAsArrayBuffer(file) |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { value, maxFile, fileType, accept } = this.props |
| | | const { showprogress, percent } = this.state |
| | | const { maxFile, fileType, accept } = this.props |
| | | const { showprogress, percent, filelist } = this.state |
| | | |
| | | let uploadable = 'fileupload-form-container ' |
| | | |
| | | if (maxFile && maxFile > 0 && value && value.length >= maxFile) { |
| | | if (maxFile && maxFile > 0 && filelist.length >= maxFile) { |
| | | uploadable += 'limit-fileupload' |
| | | } |
| | | |
| | |
| | | name: 'file', |
| | | disabled: showprogress, |
| | | listType: fileType, |
| | | fileList: value, |
| | | fileList: filelist, |
| | | action: null, |
| | | accept: accept || '', |
| | | method: 'post', |