bug 78088

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 fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase()
-      const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.every(tt => fileType.indexOf(tt) === -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
+      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') {
+      if (this.fileType === FILE_TYPE_IMG && !FILE_TYPE_IMGS.includes(fileSuffix)) {
-        this.$message.warning(this.$t('uploadFile.pleaseUpload') + 'png、jpg' + this.$t('uploadFile.file'))
+        this.$message.warning(this.$t('uploadFile.pleaseUpload') + FILE_TYPE_IMGS.join('、') + this.$t('uploadFile.file'))
         this.uploadGoOn = false
         file.uploadGoOn = false
         return false

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 === 0) {
-      if (fileSize > 1024 * 1024 * 100) {
+        this.$message.warning(this.$t('uploadFile.cannotUploadEmpty'))
-        this.$message.warning('文件大小限制为100M')
         this.uploadGoOn = false
         file.uploadGoOn = false
         return false
       }
-      console.log(this.fileType)
+      if (this.fileMaxSize && fileSize > 1024 * 1024 * this.fileMaxSize) {
-      // 不等于全部类型可以上传的时候，对上传的文件进行判断
+        this.$message.warning(this.$t('uploadFile.pleaseUpload') + this.fileMaxSize + this.$t('uploadFile.theFollowingDocuments'))
-      if (this.fileType !== FILE_TYPE_ALL) {
+        this.uploadGoOn = false
-        // filter(tt => fileType.indexOf(tt) > -1)   判断用户传的文件类型，和要求传的文件类型是否一致
+        file.uploadGoOn = false
-        // 当上传的图片格式为jpg时，在此组件中，会返回类型为 image/jpeg  ElememntUI设计如此 所以需要把用户传下来的jpg强制改成jpeg
+        return false
-        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.fileTypes === FILE_TYPE_IMG) {
+      if (fileSize > 1024 * 1024 * 500) {
-        if (fileType.indexOf('image') < 0) {
+        this.$message.warning(this.$t('uploadFile.maxSize'))
-          this.$message.warning('请上传图片')
+        this.uploadGoOn = false
-          this.uploadGoOn = false
+        file.uploadGoOn = false
-          file.uploadGoOn = false
+        return 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 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 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) {

src/views/documentTool/documentSplit/modules/ImportSplitResultModal.vue

@@ -41,7 +41,7 @@
         <!--拆分结果文件-->
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.split.splitResultFile')">
           <div class="result-file-box">
-            <j-upload v-decorator="['splitFileId', validatorRules.splitFileId]" return-id :number="1" class="line-btn" />
+            <j-upload v-decorator="['splitFileId', validatorRules.splitFileId]" return-id :number="1" class="line-btn" file-type="zip,rar" />
             <a-button class="line-btn" @click="downTemplate($t('docTool.split.documentSplitTemplate'), '.zip')">
               {{ $t('templateDownload') }}
             </a-button>