diff --git a/src/components/UploadFile.vue b/src/components/UploadFile.vue index 4343192f..03da28f6 100644 --- a/src/components/UploadFile.vue +++ b/src/components/UploadFile.vue @@ -57,18 +57,16 @@ import Vue from 'vue' const FILE_TYPE_ALL = 'all' const FILE_TYPE_IMG = 'image' -const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw'] +const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png'] const FILE_TYPE_PDF = 'pdf' // 本系统限制可以上传的文件格式 -const CAN_UPLOAD_FILE_TYPE = 'doc,docx,xls,xlsx,pdf,png,jpg' +const CAN_UPLOAD_FILE_TYPE = 'pdf,docx,doc,xlsx,xls,ppt,rar,.zip,jpg,jpeg,png,avi,wmv,mov,rm,mp4,cad' const Base64 = require('js-base64').Base64 -// 支持预览的文件类型 -const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image'] // 支持预览的文件后缀 -const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'raw', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv'] +const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'] export default { name: 'UploadFile', @@ -300,10 +298,9 @@ export default { if (!file || !file.url) { return } - const fileType = file.type // 截取文件后缀名 - const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1] : '' - const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.every(tt => fileType.indexOf(tt) === -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt) + const fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase() + const canPreview = CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt) // 判断是否为可预览格式的文件 if (!canPreview) { this.$message.loading(this.$t('uploadFile.cannotPreview')).then(() => { @@ -314,7 +311,7 @@ export default { const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}` console.log(fileSuffix) // 图片预览,使用自己添加的组件 - if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix)) { + if (FILE_TYPE_IMGS.includes(fileSuffix)) { this.imageUrl = getFileAccessHttpUrl(file.response.result.id) // 获取viewer实例 const viewer = this.$el.querySelector('.image').$viewer @@ -324,7 +321,7 @@ export default { return } // pdf预览 - if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) { + if (FILE_TYPE_PDF.includes(fileSuffix)) { const url = previewPdf(file.response.result.id) window.open(url) return @@ -363,22 +360,22 @@ export default { return true } const fileType = file.type - if (this.fileType === CAN_UPLOAD_FILE_TYPE && fileType.indexOf('image') !== -1) { - return true - } // 截取文件后缀名 const fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase() + if (this.fileType === CAN_UPLOAD_FILE_TYPE && CAN_UPLOAD_FILE_TYPE.split(',').includes(fileSuffix)) { + return true + } if (this.fileType === FILE_TYPE_IMG && fileType.indexOf('image') < 0) { this.$message.warning(this.$t('uploadFile.onlyUploadPic')) this.uploadGoOn = false file.uploadGoOn = false return false } - if (this.fileType === FILE_TYPE_IMG && (fileSuffix === 'png' || fileSuffix === 'jpg')) { + if (this.fileType === FILE_TYPE_IMG && FILE_TYPE_IMGS.includes(fileSuffix)) { return true } - if (this.fileType === FILE_TYPE_IMG && fileSuffix !== 'png' && fileSuffix !== 'jpg') { - this.$message.warning(this.$t('uploadFile.pleaseUpload') + 'png、jpg' + this.$t('uploadFile.file')) + if (this.fileType === FILE_TYPE_IMG && !FILE_TYPE_IMGS.includes(fileSuffix)) { + this.$message.warning(this.$t('uploadFile.pleaseUpload') + FILE_TYPE_IMGS.join('、') + this.$t('uploadFile.file')) this.uploadGoOn = false file.uploadGoOn = false return false diff --git a/src/components/jero/JUpload.vue b/src/components/jero/JUpload.vue index 75c00654..802a027e 100644 --- a/src/components/jero/JUpload.vue +++ b/src/components/jero/JUpload.vue @@ -6,7 +6,7 @@ :headers="headers" :data="{'biz':bizPath}" :fileList="fileList" - :beforeUpload="beforeUpload" + :beforeUpload="doBeforeUpload" @change="handleChange" :disabled="disabled" :returnUrl="returnUrl" @@ -64,10 +64,11 @@ const FILE_TYPE_PDF = 'pdf' const Base64 = require('js-base64').Base64 -// 支持预览的文件类型 -const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image'] +// 本系统限制可以上传的文件格式 +const CAN_UPLOAD_FILE_TYPE = 'pdf,docx,doc,xlsx,xls,ppt,rar,.zip,jpg,jpeg,png,avi,wmv,mov,rm,mp4,cad' + // 支持预览的文件后缀 -const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'raw', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv'] +const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'] const uidGenerator = () => { return '-' + parseInt(Math.random() * 10000 + 1, 10) } @@ -94,7 +95,7 @@ export default { fileType: { type: String, required: false, - default: FILE_TYPE_ALL + default: CAN_UPLOAD_FILE_TYPE }, /* 这个属性用于控制文件上传的业务路径 */ bizPath: { @@ -158,6 +159,14 @@ export default { type: Boolean, required: false, default: true + }, + beforeUpload: { + type: Function + }, + fileMaxSize: { + type: Number, + required: false, + default: 500 } }, watch: { @@ -301,40 +310,62 @@ export default { } this.$emit('change', path) }, - beforeUpload (file) { + doBeforeUpload (file) { this.uploadGoOn = true file.uploadGoOn = true const fileSize = file.size // 上传的文件大小 - const fileType = file.type // 上传的文件类型 - if (fileSize > 1024 * 1024 * 100) { - this.$message.warning('文件大小限制为100M') + if (fileSize === 0) { + this.$message.warning(this.$t('uploadFile.cannotUploadEmpty')) this.uploadGoOn = false file.uploadGoOn = false return false } - console.log(this.fileType) - // 不等于全部类型可以上传的时候,对上传的文件进行判断 - if (this.fileType !== FILE_TYPE_ALL) { - // filter(tt => fileType.indexOf(tt) > -1) 判断用户传的文件类型,和要求传的文件类型是否一致 - // 当上传的图片格式为jpg时,在此组件中,会返回类型为 image/jpeg ElememntUI设计如此 所以需要把用户传下来的jpg强制改成jpeg - this.fileTypes = this.fileTypes.replace('jpg', 'jpeg') - const arr = this.fileTypes.split(',').filter(tt => fileType.indexOf(tt) > -1) - if (arr.length === 0) { - this.$message.warning(this.fileTypeErrorMessage || `请上传${this.fileTypes}文件`) - this.uploadGoOn = false - file.uploadGoOn = false - return false - } + if (this.fileMaxSize && fileSize > 1024 * 1024 * this.fileMaxSize) { + this.$message.warning(this.$t('uploadFile.pleaseUpload') + this.fileMaxSize + this.$t('uploadFile.theFollowingDocuments')) + this.uploadGoOn = false + file.uploadGoOn = false + return false } - if (this.fileTypes === FILE_TYPE_IMG) { - if (fileType.indexOf('image') < 0) { - this.$message.warning('请上传图片') - this.uploadGoOn = false - file.uploadGoOn = false - return false - } + if (fileSize > 1024 * 1024 * 500) { + this.$message.warning(this.$t('uploadFile.maxSize')) + this.uploadGoOn = false + file.uploadGoOn = false + return false + } + if (this.fileType === FILE_TYPE_ALL) { + return true + } + const fileType = file.type + // 截取文件后缀名 + const fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase() + if (this.fileType === CAN_UPLOAD_FILE_TYPE && CAN_UPLOAD_FILE_TYPE.split(',').includes(fileSuffix)) { + return true + } + if (this.fileType === FILE_TYPE_IMG && fileType.indexOf('image') < 0) { + this.$message.warning(this.$t('uploadFile.onlyUploadPic')) + this.uploadGoOn = false + file.uploadGoOn = false + return false + } + if (this.fileType === FILE_TYPE_IMG && FILE_TYPE_IMGS.includes(fileSuffix)) { + return true + } + if (this.fileType === FILE_TYPE_IMG && !FILE_TYPE_IMGS.includes(fileSuffix)) { + this.$message.warning(this.$t('uploadFile.pleaseUpload') + FILE_TYPE_IMGS.join('、') + this.$t('uploadFile.file')) + this.uploadGoOn = false + file.uploadGoOn = false + return false + } + if (this.fileType.indexOf(fileSuffix) === -1) { + this.$message.warning(this.$t('uploadFile.pleaseUpload') + `${this.fileType}` + this.$t('uploadFile.file')) + this.uploadGoOn = false + file.uploadGoOn = false + return false + } + // 扩展 beforeUpload 验证 + if (typeof this.beforeUpload === 'function') { + return this.beforeUpload(file) } - // TODO 扩展功能验证文件大小 return true }, handleChange (info) { @@ -399,20 +430,20 @@ export default { if (!file || !file.url) { return } - const fileType = file.type // 截取文件后缀名 - const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1].toLowerCase() : '' - const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.some(tt => fileType.indexOf(tt) !== -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix.toLowerCase() === tt) + const fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase() + const canPreview = CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt) // 判断是否为可预览格式的文件 if (!canPreview) { - this.$message.loading('该文件类型不支持预览,正在为您准备下载...').then(() => { + this.$message.loading(this.$t('uploadFile.cannotPreview')).then(() => { this.handleDownload(file) }) return } const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}` + console.log(fileSuffix) // 图片预览,使用自己添加的组件 - if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix)) { + if (FILE_TYPE_IMGS.includes(fileSuffix)) { this.imageUrl = getFileAccessHttpUrl(file.response.result.id) // 获取viewer实例 const viewer = this.$el.querySelector('.image').$viewer @@ -422,13 +453,13 @@ export default { return } // pdf预览 - if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) { + if (FILE_TYPE_PDF.includes(fileSuffix)) { const url = previewPdf(file.response.result.id) window.open(url) return } // 其余可预览文件仍使用KKFile进行预览 - const url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(Base64.encode(fileFullUrl)) + const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}` window.open(url) }, getFileUrl (fileId) { diff --git a/src/views/documentTool/documentSplit/modules/ImportSplitResultModal.vue b/src/views/documentTool/documentSplit/modules/ImportSplitResultModal.vue index de114867..fac9fd3b 100644 --- a/src/views/documentTool/documentSplit/modules/ImportSplitResultModal.vue +++ b/src/views/documentTool/documentSplit/modules/ImportSplitResultModal.vue @@ -41,7 +41,7 @@
- + {{ $t('templateDownload') }}