媒体库增加文件上传类型

txt,pdf,doc,docx,xls,xlsx,ppt,pptx,zip,rar

src/components/upload/common.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-upload :action="`${path}/cms/mediaFile/upload?category=${props.category}`" :show-file-list="false"
+  <el-upload :action="path" :show-file-list="false" :data="uploadData" :multiple="false" :before-upload="beforeUpload"
-    :multiple="false" :before-upload="beforeUpload" :on-error="uploadFailure" :on-success="uploadSuccess">
+    :on-error="uploadFailure" :on-success="uploadSuccess">
     <el-button type="primary" plain icon="upload">{{ props.label }}</el-button>
   </el-upload>
 </template>
@@ -8,7 +8,7 @@
 <script setup>
 import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { isVideoMime, isImageMime } from '@/utils/image'
+import { isVideoMime, isImageMime, isDocumentMime, isZipMime } from '@/utils/image'
 
 defineOptions({
   name: 'UploadCommon',
@@ -22,19 +22,28 @@ const emit = defineEmits([
 
 const props = defineProps({
   category: { type: String, required: true },
-  label: { type: String, default: '上传' }
+  label: { type: String, default: '上传' },
 })
 
-const path = ref(import.meta.env.VITE_BASE_API)
+const path = ref(import.meta.env.VITE_BASE_API + '/cms/mediaFile/upload')
-
+const uploadData = ref({
+  category: props.category
+})
 const beforeUpload = (file) => {
+  const isDocument = isDocumentMime(file.type)
+  const isZip = isZipMime(file.type)
   const isLt500K = file.size / 1024 / 1024 < 0.5 // 500K, @todo 应支持在项目中设置
   const isLt5M = file.size / 1024 / 1024 < 5 // 5MB, @todo 应支持项目中设置
+  const isLt20M = file.size / 1024 / 1024 < 20 // 20MB, @todo 应支持项目中设置
   const isVideo = isVideoMime(file.type)
   const isImage = isImageMime(file.type)
 
-  if (!isVideo && !isImage) {
+  if (!isVideo && !isImage && !isDocument && !isZip) {
-    ElMessage.error('上传图片只能是 jpg,png,svg,webp 格式, 上传视频只能是 mp4,webm 格式!')
+    ElMessage.error('上传图片只能是 jpg,png,svg,webp 格式, 上传视频只能是 mp4,webm 格式，上传文件只能是 txt,pdf,doc,docx,xls,xlsx,ppt,pptx,zip,rar!')
+    return false
+  }
+  if (isDocument && !isLt20M) {
+    ElMessage.error('上传文档不能超过 20MB')
     return false
   }
   if (!isLt5M && isVideo) {
@@ -46,6 +55,15 @@ const beforeUpload = (file) => {
     return false
   }
 
+  let category = props.category
+  if (isDocument) {
+    category = 'media_document'
+  }
+  if (isZip) {
+    category = 'media_zip'
+  }
+  uploadData.value.category = category
+
   emit('on-before-upload', file)
 
   return true

src/utils/image.js

@@ -91,14 +91,65 @@ export default class ImageCompress {
   }
 }
 
+export const getUrl = (url) => {
   const path = import.meta.env.VITE_FILE_API + '/'
-export const getUrl = (url) => url && url.slice(0, 4) !== 'http' ? path + url : url
+  return url && url.slice(0, 4) !== 'http' ? path + url : url
+}
 
-export const isVideoExt = (url) => url.endsWith('.mp4') || url.endsWith('.mov') || url.endsWith('.webm') || url.endsWith('.ogg')
+export const isVideoExt = (url) => {
+  url = url.toLowerCase()
+  return url.endsWith('.mp4')
+    || url.endsWith('.mov')
+    || url.endsWith('.webm')
+    || url.endsWith('.ogg')
+}
 
-export const isVideoMime = (type) => type === 'video/mp4' || type === 'video/webm' || type === 'video/ogg'
+export const isDocumentExt = (url) => {
+  url = url.toLowerCase()
+  return url.endsWith('.txt')
+    || url.endsWith('.pdf')
+    || url.endsWith('.doc')
+    || url.endsWith('.docx')
+    || url.endsWith('.xls')
+    || url.endsWith('.xlsx')
+    || url.endsWith('.ppt')
+    || url.endsWith('.pptx')
+}
 
-export const isImageMime = (type) => type === 'image/jpeg' || type === 'image/png' || type === 'image/webp' || type === 'image/svg+xml'
+export const isZipExt = (url) => {
+  url = url.toLowerCase()
+  return url.toLowerCase().endsWith('.zip')
+    || url.endsWith('.rar')
+}
+
+export const isVideoMime = (type) => {
+  return type === 'video/mp4'
+    || type === 'video/webm'
+    || type === 'video/ogg'
+}
+
+export const isDocumentMime = (type) => {
+  return type === 'text/plain'
+    || type === 'application/pdf'
+    || type === 'application/vnd.ms-word'
+    || type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+    || type === 'application/vnd.ms-excel'
+    || type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    || type === 'application/vnd.ms-powerpoint'
+    || type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+}
+
+export const isZipMime = (type) => {
+  return type === 'application/zip'
+    || type === 'application/x-tar'
+}
+
+export const isImageMime = (type) => {
+  return type === 'image/jpeg'
+    || type === 'image/png'
+    || type === 'image/webp'
+    || type === 'image/svg+xml'
+}
 
 export const isGifMime = (type) => type === 'image/gif'
 
@@ -115,19 +166,26 @@ export const checkImageWHEqual = (file, width, height) => {
   })
 }
 
+export const isDocumentTag = (tag) => {
+  tag = tag.toLowerCase()
+  return tag == 'txt' || tag == 'pdf'
+    || tag == 'doc' || tag == 'docx'
+    || tag == 'xls' || tag == 'xlsx'
+    || tag == 'ppt' || tag == 'pptx'
+}
+
+export const isZipTag = (tag) => {
+  tag = tag.toLowerCase()
+  return tag == 'zip' || tag == 'rar'
+}
+
 export const isImageTag = (tag) => {
   tag = tag.toLowerCase()
-  if (tag == 'jpg' || tag == 'png' || tag == 'webp' || tag == 'gif' || tag == 'jpeg') {
+  return tag == 'jpg' || tag == 'png' || tag == 'webp' || tag == 'gif' || tag == 'jpeg'
-    return true
-  }
-  return false
 }
 
 export const isVideoTag = (tag) => {
   tag = tag.toLowerCase()
-  if (tag == 'mp4' || tag == 'ogg' || tag == 'webm') {
+  return tag == 'mp4' || tag == 'ogg' || tag == 'webm'
-    return true
-  }
-  return false
 }