import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Upload, message, Button, Icon, Progress, notification } from 'antd'
|
import md5 from 'md5'
|
import Api from '@/api'
|
import './index.scss'
|
|
let service = window.GLOB.service ? (/\/$/.test(window.GLOB.service) ? window.GLOB.service : window.GLOB.service + '/') : ''
|
let Url = '/Upload'
|
if (process.env.NODE_ENV === 'production') {
|
Url = document.location.origin + '/' + service + 'zh-CN/Home/Upload'
|
}
|
|
class FileUpload extends Component {
|
static propTpyes = {
|
value: PropTypes.array, // 按钮信息、表单列表
|
maxFile: PropTypes.any, // 最大文件数
|
fileType: PropTypes.string // 文件显示类型
|
}
|
|
state = {
|
baseUrl: Url,
|
percent: 0,
|
showprogress: false
|
}
|
|
init = async () => {
|
try {
|
const OSSData = await this.mockGetOSSData()
|
|
this.setState({
|
OSSData
|
})
|
} catch (error) {
|
message.error(error)
|
}
|
}
|
|
onChange = ({ fileList }) => {
|
const { onChange } = this.props
|
|
if (onChange) {
|
onChange([...fileList])
|
}
|
}
|
|
onRemove = file => {
|
const { value, onChange } = this.props
|
|
const files = value.filter(v => v.url !== file.url)
|
|
if (onChange) {
|
onChange(files)
|
}
|
}
|
|
getExtraData = () => {
|
return {
|
RootPath: 'Content/images/upload/'
|
}
|
}
|
|
shardupload = (file, shardSize, shardCount, i, fileList) => {
|
let start = i * shardSize
|
let end = Math.min(file.size, start + shardSize)
|
// let param = {
|
// file: file.slice(start, end),
|
// fileMd5: md5(''),
|
// shardingMd5: md5(''),
|
// baseDomain: '',
|
// rootPath: 'Content/images/upload/',
|
// fileName: file.name,
|
// fileExt: file.type.replace('image/', ''),
|
// shardingCnt: shardCount,
|
// shardingNo: i + 1
|
// }
|
|
let form = new FormData()
|
let pice = file.slice(start, end)
|
|
form.append('file', pice) //slice方法用于切出文件的一部分
|
form.append('fileMd5', md5(file))
|
form.append('shardingMd5', md5(pice))
|
form.append('baseDomain', '')
|
form.append('rootPath', 'Content/images/upload/')
|
form.append('fileName', file.name)
|
form.append('fileExt', file.type.replace('image/', ''))
|
form.append('shardingCnt', shardCount)
|
form.append('shardingNo', i + 1)
|
|
Api.getLargeFileUpload(form).then(res => {
|
if (res.status) {
|
if (i < shardCount) {
|
i++
|
|
this.setState({
|
percent: Math.floor(100 * (i / shardCount))
|
})
|
this.shardupload(file, shardSize, shardCount, i, fileList)
|
}
|
} else {
|
fileList = fileList.filter(item => !!item.url)
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
// } else {
|
// this.setState({
|
// percent: 100
|
// }, () => {
|
// setTimeout(() => {
|
// this.setState({
|
// showprogress: false,
|
// percent: 0
|
// })
|
// }, 200)
|
// })
|
// }
|
}
|
|
beforeUpload = (file, fileList) => {
|
let shardSize = 2 * 1024 * 1024
|
|
if (file.size > shardSize) {
|
// this.setState({
|
// showprogress: true,
|
// percent: 0
|
// })
|
// let shardCount = Math.ceil(file.size / shardSize)
|
|
// this.shardupload(file, shardSize, shardCount, 0, fileList)
|
// return false
|
return true
|
} else {
|
return true
|
}
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { value, maxFile, fileType } = this.props
|
const { showprogress, percent, baseUrl } = this.state
|
|
let uploadable = ''
|
|
if (maxFile && maxFile > 0 && value && value.length >= maxFile) {
|
uploadable = 'limit-fileupload'
|
}
|
|
const props = {
|
name: 'file',
|
disabled: showprogress,
|
listType: fileType,
|
fileList: value,
|
action: baseUrl,
|
method: 'post',
|
multiple: true,
|
onChange: this.onChange,
|
onRemove: this.onRemove,
|
data: this.getExtraData,
|
beforeUpload: this.beforeUpload,
|
className: uploadable
|
}
|
|
return (
|
<Upload {...props}>
|
<Button>
|
<Icon type="upload" /> 点击上传
|
</Button>
|
{showprogress ? <Progress percent={percent} size="small" /> : null}
|
</Upload>
|
)
|
}
|
}
|
|
export default FileUpload
|
