| | |
|---|
| | | import React, {Component} from 'react' |
|---|
| | | import PropTypes from 'prop-types' |
|---|
| | | import { Upload, message, Button, Icon, Progress } from 'antd' |
|---|
| | | import { is, fromJS } from 'immutable' |
|---|
| | | import moment from 'moment' |
|---|
| | | import { Upload, Button, Icon, Progress, notification } from 'antd' |
|---|
| | | import SparkMD5 from 'spark-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' |
|---|
| | | let service = '' |
|---|
| | | if (process.env.NODE_ENV === 'production') { |
|---|
| | | Url = document.location.origin + '/' + service + 'zh-CN/Home/Upload' |
|---|
| | | service = document.location.origin + '/' + window.GLOB.service |
|---|
| | | } else { |
|---|
| | | service = window.GLOB.location + '/' + window.GLOB.service |
|---|
| | | } |
|---|
| | | |
|---|
| | | class FileUpload extends Component { |
|---|
| | | static propTpyes = { |
|---|
| | | value: PropTypes.array // 按钮信息、表单列表 |
|---|
| | | config: PropTypes.object, // 表单信息 |
|---|
| | | onChange: PropTypes.func, // 表单变化 |
|---|
| | | } |
|---|
| | | |
|---|
| | | state = { |
|---|
| | | baseUrl: Url, |
|---|
| | | percent: 0, |
|---|
| | | showprogress: false |
|---|
| | | accept: '', |
|---|
| | | accepts: null, |
|---|
| | | maxFile: null, |
|---|
| | | rduri: '', |
|---|
| | | limit: 2, |
|---|
| | | compress: false, |
|---|
| | | fileType: 'text', |
|---|
| | | showprogress: false, |
|---|
| | | filelist: [] |
|---|
| | | } |
|---|
| | | |
|---|
| | | init = async () => { |
|---|
| | | try { |
|---|
| | | const OSSData = await this.mockGetOSSData() |
|---|
| | | UNSAFE_componentWillMount () { |
|---|
| | | const { config } = this.props |
|---|
| | | |
|---|
| | | this.setState({ |
|---|
| | | OSSData |
|---|
| | | }) |
|---|
| | | } catch (error) { |
|---|
| | | message.error(error) |
|---|
| | | let filelist = [] |
|---|
| | | if (config.initval) { |
|---|
| | | try { |
|---|
| | | filelist = config.initval.split(',').map((url, index) => { |
|---|
| | | return { |
|---|
| | | uid: `${index}`, |
|---|
| | | name: url.slice(url.lastIndexOf('/') + 1), |
|---|
| | | status: 'done', |
|---|
| | | url: url, |
|---|
| | | origin: true |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } catch (e) { |
|---|
| | | filelist = [] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | let accept = '' |
|---|
| | | let accepts = null |
|---|
| | | let compress = false |
|---|
| | | if (config.compress === 'true') { |
|---|
| | | compress = true |
|---|
| | | accepts = ['.jpg', '.png', '.gif', '.jpeg'] |
|---|
| | | accept = accepts.join(',') |
|---|
| | | } else if (config.suffix) { |
|---|
| | | accepts = config.suffix.split(',').map(item => { |
|---|
| | | if (!/^\./ig.test(item)) { |
|---|
| | | item = '.' + item |
|---|
| | | } |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | accept = accepts.join(',') |
|---|
| | | } |
|---|
| | | let rduri = config.rduri || '' |
|---|
| | | |
|---|
| | | if (window.GLOB.systemType === 'production') { |
|---|
| | | rduri = config.proRduri || '' |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.setState({ |
|---|
| | | rduri, |
|---|
| | | accept, |
|---|
| | | accepts, |
|---|
| | | filelist, |
|---|
| | | compress, |
|---|
| | | limit: config.limit || 2, |
|---|
| | | maxFile: config.maxfile && config.maxfile > 0 ? config.maxfile : null, |
|---|
| | | fileType: config.fileType || 'text' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | shouldComponentUpdate (nextProps, nextState) { |
|---|
| | | return !is(fromJS(this.state), fromJS(nextState)) |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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}) |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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) |
|---|
| | | this.setState({filelist: files}) |
|---|
| | | |
|---|
| | | if (onChange) { |
|---|
| | | onChange(files) |
|---|
| | | } |
|---|
| | | let vals = [] |
|---|
| | | |
|---|
| | | files.forEach(item => { |
|---|
| | | if (item.origin && item.url) { |
|---|
| | | vals.push(item.url) |
|---|
| | | } else if (!item.origin && item.status === 'done' && item.response) { |
|---|
| | | vals.push(item.response) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.props.onChange(vals.join(',')) |
|---|
| | | } |
|---|
| | | |
|---|
| | | getExtraData = () => { |
|---|
| | | return { |
|---|
| | | RootPath: 'Content/images/upload/' |
|---|
| | | onUpdate = (url) => { |
|---|
| | | let filelist = fromJS(this.state.filelist).toJS() |
|---|
| | | |
|---|
| | | if (filelist[filelist.length -1]) { |
|---|
| | | filelist[filelist.length -1].status = 'done' |
|---|
| | | filelist[filelist.length -1].response = url |
|---|
| | | filelist[filelist.length -1].origin = false |
|---|
| | | } |
|---|
| | | |
|---|
| | | filelist = filelist.filter(item => !!(item.url || item.response)) |
|---|
| | | |
|---|
| | | let vals = [] |
|---|
| | | |
|---|
| | | filelist.forEach(item => { |
|---|
| | | if (item.origin && item.url) { |
|---|
| | | vals.push(item.url) |
|---|
| | | } else if (!item.origin && item.status === 'done' && item.response) { |
|---|
| | | vals.push(item.response) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.setState({filelist}) |
|---|
| | | this.props.onChange(vals.join(',')) |
|---|
| | | } |
|---|
| | | |
|---|
| | | shardupload = (file, shardSize, shardCount, i, fileList) => { |
|---|
| | | let start = i * shardSize |
|---|
| | | let end = Math.min(file.size, start + shardSize) |
|---|
| | | onFail = (msg) => { |
|---|
| | | let filelist = this.state.filelist.map(item => { |
|---|
| | | if (!item.url && !item.response && !item.status) { |
|---|
| | | item.status = 'error' |
|---|
| | | } |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.setState({filelist, showprogress: false, percent: 0}) |
|---|
| | | |
|---|
| | | notification.warning({ |
|---|
| | | top: 92, |
|---|
| | | message: msg || '文件上传失败！', |
|---|
| | | duration: 5 |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | shardupload = (params) => { |
|---|
| | | let param = params.chunks.shift() |
|---|
| | | let form = new FormData() |
|---|
| | | |
|---|
| | | form.append('file', file.slice(start, end)) //slice方法用于切出文件的一部分 |
|---|
| | | form.append('RootPath', 'Content/images/upload/') |
|---|
| | | form.append('name', file.name) |
|---|
| | | form.append('total', shardCount) |
|---|
| | | form.append('index', i + 1) |
|---|
| | | form.append('file', param.binary) |
|---|
| | | form.append('fileMd5', params.file.fileMd5) |
|---|
| | | form.append('shardingMd5', param.chunkMd5) |
|---|
| | | form.append('baseDomain', service) |
|---|
| | | form.append('rootPath', 'Content/images/upload/') |
|---|
| | | form.append('fileName', params.file.fileName) |
|---|
| | | form.append('fileExt', params.file.fileType) |
|---|
| | | form.append('shardingCnt', param.chunks) |
|---|
| | | form.append('shardingNo', param.chunk) |
|---|
| | | form.append('LoginUID', sessionStorage.getItem('LoginUID') || '') |
|---|
| | | form.append('UserID', sessionStorage.getItem('UserID') || '') |
|---|
| | | |
|---|
| | | if (i < shardCount) { |
|---|
| | | i++ |
|---|
| | | Api.getFileUpload(form).then(res => { |
|---|
| | | if (res) { |
|---|
| | | Api.getLargeFileUpload(form).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | if (params.chunks.length > 0) { |
|---|
| | | this.setState({ |
|---|
| | | percent: Math.floor(100 * (i / shardCount)) |
|---|
| | | percent: Math.floor(100 * (param.chunk / param.chunks)) |
|---|
| | | }) |
|---|
| | | this.shardupload(file, shardSize, shardCount, i, fileList) |
|---|
| | | this.shardupload(params) |
|---|
| | | } else { |
|---|
| | | if (res.urlPath) { |
|---|
| | | this.onUpdate(res.urlPath) |
|---|
| | | } else { |
|---|
| | | this.onFail() |
|---|
| | | } |
|---|
| | | this.setState({ |
|---|
| | | percent: 100 |
|---|
| | | }, () => { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.setState({ |
|---|
| | | showprogress: false, |
|---|
| | | percent: 0 |
|---|
| | | }) |
|---|
| | | }, 200) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.setState({ |
|---|
| | | percent: 100 |
|---|
| | | }, () => { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.setState({ |
|---|
| | | showprogress: false, |
|---|
| | | percent: 0 |
|---|
| | | }) |
|---|
| | | }, 200) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.onFail(res.message) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | beforeUpload = (file, fileList) => { |
|---|
| | | let shardSize = 2 * 1024 * 1024 |
|---|
| | | // let shardSize = 3 * 1024 |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (file.size > shardSize) { |
|---|
| | | this.setState({ |
|---|
| | | showprogress: true, |
|---|
| | | percent: 0 |
|---|
| | | beforeUpload = (file) => { |
|---|
| | | const { accepts, compress, limit, rduri } = this.state |
|---|
| | | |
|---|
| | | if (accepts && file.name) { |
|---|
| | | let pass = false |
|---|
| | | accepts.forEach(type => { |
|---|
| | | if (new RegExp(type + '$', 'ig').test(file.name)) { |
|---|
| | | pass = true |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | let shardCount = Math.ceil(file.size / shardSize) |
|---|
| | | this.shardupload(file, shardSize, shardCount, 0, fileList) |
|---|
| | | |
|---|
| | | if (!pass) { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.onFail('文件格式错误！') |
|---|
| | | }, 10) |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.setState({ |
|---|
| | | showprogress: true, |
|---|
| | | percent: 0 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (compress) { |
|---|
| | | let reader = new FileReader() |
|---|
| | | let fileSize = file.size / 1024 / 1024 |
|---|
| | | let compressRate = 0.9 |
|---|
| | | |
|---|
| | | if (fileSize / limit > 5) { |
|---|
| | | compressRate = 0.4 |
|---|
| | | } else if (fileSize / limit > 4) { |
|---|
| | | compressRate = 0.5 |
|---|
| | | } else if (fileSize / limit > 3) { |
|---|
| | | compressRate = 0.6 |
|---|
| | | } else if (fileSize / limit > 2) { |
|---|
| | | compressRate = 0.7 |
|---|
| | | } else if (fileSize > limit) { |
|---|
| | | compressRate = 0.8 |
|---|
| | | } |
|---|
| | | |
|---|
| | | reader.onload = (e) => { |
|---|
| | | let img = new Image() |
|---|
| | | let maxW = 640 |
|---|
| | | |
|---|
| | | img.onload = () => { |
|---|
| | | let cvs = document.createElement( 'canvas') |
|---|
| | | let ctx = cvs.getContext( '2d') |
|---|
| | | |
|---|
| | | if (img.width > maxW) { |
|---|
| | | img.height *= maxW / img.width |
|---|
| | | img.width = maxW |
|---|
| | | } |
|---|
| | | |
|---|
| | | cvs.width = img.width |
|---|
| | | cvs.height = img.height |
|---|
| | | |
|---|
| | | ctx.clearRect(0, 0, cvs.width, cvs.height) |
|---|
| | | ctx.drawImage(img, 0, 0, img.width, img.height) |
|---|
| | | |
|---|
| | | let param = {Base64Img: cvs.toDataURL('image/jpeg', compressRate)} |
|---|
| | | |
|---|
| | | if (rduri) { |
|---|
| | | param.rduri = rduri |
|---|
| | | } |
|---|
| | | |
|---|
| | | Api.fileuploadbase64(param).then(result => { |
|---|
| | | if (result.status && result.Images) { |
|---|
| | | let url = service + result.Images |
|---|
| | | |
|---|
| | | if (rduri) { |
|---|
| | | url = rduri.replace(/webapi(.*)$/, '') + result.Images |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.onUpdate(url) |
|---|
| | | |
|---|
| | | this.setState({ |
|---|
| | | percent: 100 |
|---|
| | | }, () => { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.setState({ |
|---|
| | | showprogress: false, |
|---|
| | | percent: 0 |
|---|
| | | }) |
|---|
| | | }, 200) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.onFail(result.message) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | img.onerror = () => { |
|---|
| | | this.onFail('图片读取失败！') |
|---|
| | | } |
|---|
| | | |
|---|
| | | img.src = e.target.result |
|---|
| | | } |
|---|
| | | |
|---|
| | | reader.onerror = () => { |
|---|
| | | this.onFail('文件读取失败！') |
|---|
| | | } |
|---|
| | | |
|---|
| | | reader.readAsDataURL(file) |
|---|
| | | return false |
|---|
| | | } else { |
|---|
| | | return true |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 兼容性的处理 |
|---|
| | | let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice |
|---|
| | | let chunkSize = 1024 * 1024 * 2 // 切片每次2M |
|---|
| | | let chunks = Math.ceil(file.size / chunkSize) // 切片总数 |
|---|
| | | let currentChunk = 0 // 当前上传的chunk |
|---|
| | | let spark = new SparkMD5.ArrayBuffer() // 对arrayBuffer数据进行md5加密，产生一个md5字符串 |
|---|
| | | let chunkFileReader = new FileReader() // 用于计算出每个chunkMd5 |
|---|
| | | let totalFileReader = new FileReader() // 用于计算出总文件的fileMd5 |
|---|
| | | let params = {chunks: [], file: {}} // 用于上传所有分片的md5信息 |
|---|
| | | |
|---|
| | | params.file.fileName = file.name.replace(/\.{1}[^.]*$/ig, '') // 文件名（去除后缀名） |
|---|
| | | params.file.fileType = file.name.replace(/^.*\.{1}/ig, '') // 文件类型 |
|---|
| | | params.file.fileSize = file.size // 文件大小 |
|---|
| | | params.file.fileChunks = chunks // 记录所有chunks的长度 |
|---|
| | | |
|---|
| | | if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) { // 文件名称含有英文及数字之外字符时，名称系统生成 |
|---|
| | | params.file.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid() |
|---|
| | | } |
|---|
| | | |
|---|
| | | totalFileReader.readAsArrayBuffer(file) |
|---|
| | | totalFileReader.onload = (e) => { // 对整个totalFile生成md5 |
|---|
| | | spark.append(e.target.result) |
|---|
| | | params.file.fileMd5 = spark.end() // 计算整个文件的fileMd5 |
|---|
| | | |
|---|
| | | let _param = new FormData() |
|---|
| | | _param.append('fileMd5', params.file.fileMd5) |
|---|
| | | |
|---|
| | | Api.getFilePreUpload(_param).then(res => { |
|---|
| | | if (res.status && res.urlPath) { |
|---|
| | | this.onUpdate(res.urlPath) |
|---|
| | | this.setState({ |
|---|
| | | percent: 100 |
|---|
| | | }, () => { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.setState({ |
|---|
| | | showprogress: false, |
|---|
| | | percent: 0 |
|---|
| | | }) |
|---|
| | | }, 200) |
|---|
| | | }) |
|---|
| | | } else if (res.shardings && res.shardings.length > 0) { |
|---|
| | | res.shardings.forEach(shard => { |
|---|
| | | if (shard.shardingNo && parseInt(shard.shardingNo) > currentChunk) { |
|---|
| | | currentChunk = parseInt(shard.shardingNo) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | loadNext() |
|---|
| | | } else { |
|---|
| | | loadNext() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | chunkFileReader.onload = (e) => { |
|---|
| | | spark.append(e.target.result) // 对每一片分片进行md5加密 |
|---|
| | | |
|---|
| | | params.chunks[params.chunks.length - 1].chunkMd5 = spark.end() // 添加切片md5 |
|---|
| | | |
|---|
| | | currentChunk++ // 每一次分片onload,currentChunk都需要增加，以便来计算分片的次数 |
|---|
| | | |
|---|
| | | if (currentChunk < chunks) { // 当前切片总数没有达到总数时 |
|---|
| | | loadNext() |
|---|
| | | } else { |
|---|
| | | this.shardupload(params) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | chunkFileReader.onerror = () => { |
|---|
| | | this.onFail('文件读取失败！') |
|---|
| | | } |
|---|
| | | totalFileReader.onerror = () => { |
|---|
| | | this.onFail('文件读取失败！') |
|---|
| | | } |
|---|
| | | |
|---|
| | | let loadNext = () => { |
|---|
| | | let start = currentChunk * chunkSize // 计算分片的起始位置 |
|---|
| | | let end = Math.min(file.size, start + chunkSize) // 计算分片的结束位置 |
|---|
| | | |
|---|
| | | let obj = { // 每一个分片需要包含的信息 |
|---|
| | | chunk: currentChunk + 1, |
|---|
| | | binary: file.slice(start, end), |
|---|
| | | start: start, |
|---|
| | | end: end, |
|---|
| | | chunks |
|---|
| | | } |
|---|
| | | |
|---|
| | | params.chunks.push(obj) |
|---|
| | | chunkFileReader.readAsArrayBuffer(blobSlice.call(file, start, end)) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description 组件销毁，清除state更新 |
|---|
| | | */ |
|---|
| | | componentWillUnmount () { |
|---|
| | | this.setState = () => { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | render() { |
|---|
| | | const { value } = this.props |
|---|
| | | const { showprogress, percent, baseUrl } = this.state |
|---|
| | | const { showprogress, percent, filelist, maxFile, fileType, accept } = this.state |
|---|
| | | |
|---|
| | | let uploadable = 'fileupload-form-container ' |
|---|
| | | |
|---|
| | | if (maxFile && filelist.length >= maxFile) { |
|---|
| | | uploadable += 'limit-fileupload' |
|---|
| | | } |
|---|
| | | |
|---|
| | | const props = { |
|---|
| | | name: 'file', |
|---|
| | | disabled: showprogress, |
|---|
| | | fileList: value, |
|---|
| | | action: baseUrl, |
|---|
| | | listType: fileType, |
|---|
| | | fileList: filelist, |
|---|
| | | action: null, |
|---|
| | | accept: accept, |
|---|
| | | method: 'post', |
|---|
| | | multiple: true, |
|---|
| | | // headers: {'RootPath': 'Content/images/upload/'}, |
|---|
| | | multiple: false, |
|---|
| | | onChange: this.onChange, |
|---|
| | | onRemove: this.onRemove, |
|---|
| | | data: this.getExtraData, |
|---|
| | | beforeUpload: this.beforeUpload, |
|---|
| | | className: uploadable |
|---|
| | | } |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <Upload {...props}> |
|---|
| | | <Button> |
|---|
| | | {fileType !== 'picture-card' ? <Button> |
|---|
| | | <Icon type="upload" /> 点击上传 |
|---|
| | | </Button> |
|---|
| | | </Button> : null} |
|---|
| | | {fileType === 'picture-card' ? <span style={{whiteSpace: 'nowrap'}}> |
|---|
| | | <Icon type="upload" /> 点击上传 |
|---|
| | | </span> : null} |
|---|
| | | {showprogress ? <Progress percent={percent} size="small" /> : null} |
|---|
| | | </Upload> |
|---|
| | | ) |
|---|
