From 024eb4361da58f67b8da943dfe36a396bd1bc6ca Mon Sep 17 00:00:00 2001 From: "gao.zhiyuan" Date: Fri, 7 Jul 2023 09:34:24 +0800 Subject: [PATCH] debug fileList_ --- web/client/src/components/Upload/index.js | 550 +++++++++++----------- 1 file changed, 275 insertions(+), 275 deletions(-) diff --git a/web/client/src/components/Upload/index.js b/web/client/src/components/Upload/index.js index 3f5f4307..463146d1 100644 --- a/web/client/src/components/Upload/index.js +++ b/web/client/src/components/Upload/index.js @@ -7,26 +7,26 @@ import moment from 'moment'; import { PlusOutlined, UploadOutlined, CloseOutlined } from '@ant-design/icons'; class Uploads extends Component { - constructor(props) { - super(props); - this.ApiRoot = localStorage.getItem('tyApiRoot') - this.state = { - fileUploading: false, - fileList: [], - curPreviewPic: '', - delPicIng: false, - removeFilesList: [] - }; - } + constructor(props) { + super(props); + this.ApiRoot = localStorage.getItem('tyApiRoot') + this.state = { + fileUploading: false, + fileList: [], + curPreviewPic: '', + delPicIng: false, + removeFilesList: [] + }; + } - dealName = (uploaded) => { - console.log(uploaded) - let realName = uploaded.split('/')[2] - let x1 = realName.split('.') - let x2 = x1[0].split('_') - let showName = `${x2[0]}.${x1[1]}` - return showName - } + dealName = (uploaded) => { + console.log(uploaded) + let realName = uploaded.split('/')[2] + let x1 = realName.split('.') + let x2 = x1[0].split('_') + let showName = `${x2[0]}.${x1[1]}` + return showName + } setFileList = (value) => { let defaultFileList = []; @@ -46,281 +46,281 @@ class Uploads extends Component { }); }; - componentDidMount() { + componentDidMount () { const { value } = this.props; if (value) { this.setFileList(value); } } - componentWillReceiveProps (np) { - const { dispatch, value: thisEditData, onChange } = this.props; - const { value: nextEditData, clearFileList } = np; + componentWillReceiveProps (np) { + const { dispatch, value: thisEditData, onChange } = this.props; + const { value: nextEditData, clearFileList } = np; - const setFileList = () => { - let defaultFileList = []; - defaultFileList = nextEditData.map((u, index) => { - let fileUrl = `${this.ApiRoot}/${u.storageUrl}`; - return { - uid: -index - 1, - name: this.dealName(u.storageUrl), - status: 'done', - storageUrl: u.storageUrl, - url: fileUrl, - size: u.size || -1 - }; - }); - this.setState({ - fileList: defaultFileList - }); - }; + const setFileList = () => { + let defaultFileList = []; + defaultFileList = nextEditData.map((u, index) => { + let fileUrl = `${this.ApiRoot}/${u.storageUrl}`; + return { + uid: -index - 1, + name: this.dealName(u.storageUrl), + status: 'done', + storageUrl: u.storageUrl, + url: fileUrl, + size: u.size || -1 + }; + }); + this.setState({ + fileList: defaultFileList + }); + }; - if (nextEditData && nextEditData.length) { - if (!thisEditData || !this.state.fileList.length) { - setFileList(); - } else if (nextEditData.length != thisEditData.length) { - setFileList(); - } else { - let repeat = true; - for (let i = 0; i < thisEditData.length; i++) { - if (thisEditData[i] != nextEditData[i]) { - repeat = false; - break; - } - } - if (!repeat) { - setFileList(); + if (nextEditData && nextEditData.length) { + if (!thisEditData || !this.state.fileList.length) { + setFileList(); + } else if (nextEditData.length != thisEditData.length) { + setFileList(); + } else { + let repeat = true; + for (let i = 0; i < thisEditData.length; i++) { + if (thisEditData[i] != nextEditData[i]) { + repeat = false; + break; + } + } + if (!repeat) { + setFileList(); + } } - } - } + } - if (clearFileList) { - this.setState({ - fileList: [] - }); - } + if (clearFileList) { + this.setState({ + fileList: [] + }); + } - // else{ - // this.setState({ - // fileList:[], - // }) - // } - } + // else{ + // this.setState({ + // fileList:[], + // }) + // } + } - render () { - const UploadPath = { - project: ['txt', 'dwg', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'png', 'jpg', 'rar', 'zip'], - report: ['doc', 'docx', 'xls', 'xlsx', 'pdf'], - data: ['txt', 'xls', 'xlsx'], - image: ['png', 'jpg', 'svg', 'jpeg'], - three: ['js'], - video: ['mp4'] - }; - /** - * uploadType 【string】 主要区别文件上传路径 以及类型 以 web/routes/attachment/index.js 中 UploadPath 的 key 值为准；默认 project； - * disabled 【boolean】 上传是否可用 - * maxFilesNum 【number】 最大上传数量 - * fileTypes 【array[string]】 可允许上传的文件类型； - * maxFileSize 【number】 单个文件最大大小 M - * listType 【antd】 upload 组件的属性 - * onChange 【function】 文件数量变化时候回调 返回文件 - * value 【array[obj]】 编辑数据 [{url:'xxx', [size:999]}] - * onStateChange 【function】 文件状态改变回调函数 上传中 return { uploading:true/false } - */ - const { - uploadType, - disabled, - maxFilesNum, - fileTypes, - maxFileSize, - listType, - onChange, - value, - showUploadList, - onStateChange - } = this.props; - const { fileList, curPreviewPic, delPicIng, removeFilesList } = this.state; - const that = this; - let uploadType_ = uploadType || 'project'; - let maxFilesNum_ = maxFilesNum || 1; - let defaultFileTypes = fileTypes || UploadPath[uploadType_]; - const uploadProps = { - name: 'checkFile_', - multiple: false, - showUploadList: showUploadList || true, - action: `${this.ApiRoot}/attachments/${uploadType_}`, - listType: listType || 'text', - disabled: disabled, - beforeUpload: (file) => { - if (fileList.length >= maxFilesNum_) { - message.warning(`最多选择${maxFilesNum_}个文件上传`); - return false; - } - if (file.name.length > 60) { - message.warning(`文件名过长(大于60字符)，请修改后上传`); - return false; - } - const extNames = file.name.split('.'); - var reg = /^[\.\s\u4e00-\u9fa5a-zA-Z0-9_-]{0,}$/; - if (!reg.exec(file.name)) { - message.warning(`文件名包含除字母、汉字、数字、中划线、下划线之外的字符，请修改后上传`); - return false; + render () { + const UploadPath = { + project: ['txt', 'dwg', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'png', 'jpg', 'rar', 'zip'], + report: ['doc', 'docx', 'xls', 'xlsx', 'pdf'], + data: ['txt', 'xls', 'xlsx'], + image: ['png', 'jpg', 'svg', 'jpeg'], + three: ['js'], + video: ['mp4'] + }; + /** + * uploadType 【string】 主要区别文件上传路径 以及类型 以 web/routes/attachment/index.js 中 UploadPath 的 key 值为准；默认 project； + * disabled 【boolean】 上传是否可用 + * maxFilesNum 【number】 最大上传数量 + * fileTypes 【array[string]】 可允许上传的文件类型； + * maxFileSize 【number】 单个文件最大大小 M + * listType 【antd】 upload 组件的属性 + * onChange 【function】 文件数量变化时候回调 返回文件 + * value 【array[obj]】 编辑数据 [{url:'xxx', [size:999]}] + * onStateChange 【function】 文件状态改变回调函数 上传中 return { uploading:true/false } + */ + const { + uploadType, + disabled, + maxFilesNum, + fileTypes, + maxFileSize, + listType, + onChange, + value, + showUploadList, + onStateChange + } = this.props; + const { fileList, curPreviewPic, delPicIng, removeFilesList } = this.state; + const that = this; + let uploadType_ = uploadType || 'project'; + let maxFilesNum_ = maxFilesNum || 1; + let defaultFileTypes = fileTypes || UploadPath[uploadType_]; + const uploadProps = { + name: 'checkFile_', + multiple: false, + showUploadList: showUploadList || true, + action: `${this.ApiRoot}/attachments/${uploadType_}`, + listType: listType || 'text', + disabled: disabled, + beforeUpload: (file) => { + if (fileList.length >= maxFilesNum_) { + message.warning(`最多选择${maxFilesNum_}个文件上传`); + return false; + } + if (file.name.length > 60) { + message.warning(`文件名过长(大于60字符)，请修改后上传`); + return false; + } + const extNames = file.name.split('.'); + var reg = /^[\.\s\u4e00-\u9fa5a-zA-Z0-9_-]{0,}$/; + if (!reg.exec(file.name)) { + message.warning(`文件名包含除字母、汉字、数字、中划线、下划线之外的字符，请修改后上传`); + return false; + } + let isDAE = false; + if (extNames.length > 0) { + let fileType = extNames[extNames.length - 1].toLowerCase(); + isDAE = defaultFileTypes.some((f) => f == fileType); + } + if (!isDAE) { + message.error(`只能上传 ${defaultFileTypes.join()} 格式的文件!`); + return false; + } + const isLt = file.size / 1024 / 1024 < (maxFileSize || 3); + if (!isLt) { + message.error(`文件必须小于${maxFileSize || 3}MB!`); + return false; + } + this.setState({ + fileUploading: true + }); + if (onStateChange) { + onStateChange({ uploading: true }); + } + }, + onChange (info) { + const status = info.file.status; + if (status === 'uploading') { + that.setState({ + fileList: info.fileList + }); + } + if (status === 'done') { + let { uploaded, url } = info.file.response; + let size = info.file.size; + let nextFileList = fileList; + nextFileList[nextFileList.length - 1] = { + uid: -moment().unix(), + name: that.dealName(uploaded), + status: 'done', + storageUrl: uploaded, + url: url, + size: size + }; + onChange(nextFileList); + that.setState({ + fileUploading: false, + fileList: nextFileList + }); + if (onStateChange) { + onStateChange({ uploading: false }); + } + } else if (status === 'error') { + that.setState({ + fileUploading: false + }); + message.error(`${info.file.name} 上传失败，请重试`); + if (onStateChange) { + onStateChange({ uploading: false }); + } + } + }, + onRemove (file) { + let nextFileList = []; + fileList.map((f, i) => { + if (f.uid != file.uid) { + nextFileList.push(f); + } + }); + let nextRemoveFiles = removeFilesList.concat([file.storageUrl]); + if (curPreviewPic == file.url) { + that.setState({ + curPreviewPic: '' + }); + } + onChange(nextFileList); + that.setState({ + fileList: nextFileList, + removeFilesList: nextRemoveFiles + }); + }, + onPreview (file) { + let filePostfix = file.url.split('.').pop(); + filePostfix = filePostfix.toLowerCase(); + if (UploadPath.image.some((img) => img == filePostfix)) { + that.setState({ + curPreviewPic: file.url + }); + } else { + message.warn('仅支持图片预览'); + } } - let isDAE = false; - if (extNames.length > 0) { - let fileType = extNames[extNames.length - 1].toLowerCase(); - isDAE = defaultFileTypes.some((f) => f == fileType); - } - if (!isDAE) { - message.error(`只能上传 ${defaultFileTypes.join()} 格式的文件!`); - return false; - } - const isLt = file.size / 1024 / 1024 < (maxFileSize || 3); - if (!isLt) { - message.error(`文件必须小于${maxFileSize || 3}MB!`); - return false; - } - this.setState({ - fileUploading: true - }); - if (onStateChange) { - onStateChange({ uploading: true }); - } - }, - onChange (info) { - const status = info.file.status; - if (status === 'uploading') { - that.setState({ - fileList: info.fileList - }); - } - if (status === 'done') { - let { uploaded, url } = info.file.response; - let size = info.file.size; - let nextFileList = fileList; - nextFileList[nextFileList.length - 1] = { - uid: -moment().unix(), - name: that.dealName(uploaded), - status: 'done', - storageUrl: uploaded, - url: url, - size: size - }; - onChange(nextFileList); - that.setState({ - fileUploading: false, - fileList: nextFileList - }); - if (onStateChange) { - onStateChange({ uploading: false }); - } - } else if (status === 'error') { - that.setState({ - fileUploading: false - }); - message.error(`${info.file.name} 上传失败，请重试`); - if (onStateChange) { - onStateChange({ uploading: false }); - } - } - }, - onRemove (file) { - let nextFileList = []; - fileList.map((f, i) => { - if (f.uid != file.uid) { - nextFileList.push(f); - } - }); - let nextRemoveFiles = removeFilesList.concat([file.storageUrl]); - if (curPreviewPic == file.url) { - that.setState({ - curPreviewPic: '' - }); - } - onChange(nextFileList); - that.setState({ - fileList: nextFileList, - removeFilesList: nextRemoveFiles - }); - }, - onPreview (file) { - let filePostfix = file.url.split('.').pop(); - filePostfix = filePostfix.toLowerCase(); - if (UploadPath.image.some((img) => img == filePostfix)) { - that.setState({ - curPreviewPic: file.url - }); - } else { - message.warn('仅支持图片预览'); - } - } - }; - - let fileList_ = fileList - // .map(f => { - // if (f.storageUrl) { - // let realName = f.storageUrl.split('/').pop() - // if (f.name != realName) { - // f.name = realName - // } - // } - // return f - // }) + }; - return ( -
- - - { - disabled ? ( - '' - ) : - listType == 'picture-card' ? - ( - fileList.length >= maxFilesNum_ ? null : ( -
- -
上传图片
-
- ) - ) : ( - - ) - } - - { - curPreviewPic ? ( - -
- 文件预览 - { this.setState({ curPreviewPic: '' }); }} - > - - -
- - - ) : '' - } - -
- ); - } + let fileList_ = fileList + // .map(f => { + // if (f.storageUrl) { + // let realName = f.storageUrl.split('/').pop() + // if (f.name != realName) { + // f.name = realName + // } + // } + // return f + // }) + console.log('fileList_：', fileList_); + return ( +
+ + + { + disabled ? ( + '' + ) : + listType == 'picture-card' ? + ( + fileList.length >= maxFilesNum_ ? null : ( +
+ +
上传图片
+
+ ) + ) : ( + + ) + } + + { + curPreviewPic ? ( + +
+ 文件预览 + { this.setState({ curPreviewPic: '' }); }} + > + + +
+ + + ) : '' + } + +
+ ); + } } function mapStateToProps (state) { - const { auth } = state - return { - user: auth.user - }; + const { auth } = state + return { + user: auth.user + }; } export default connect(mapStateToProps)(Uploads);