feat: 优化文件上传功能柜

src/components/Upload/Excel.vue

@@ -1,3 +1,4 @@
+<!-- excel 导入组件 -->
 <template>
   <el-dialog :title="prop.title" v-model="state.upload.open" width="60%">
     <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="headers" :action="url"

src/components/Upload/Image.vue

@@ -2,30 +2,27 @@
 
 <template>
   <div>
-    <el-upload
+    <el-upload ref="fileUpload" class="avatar-uploader" :action="props.uploadFileUrl" :show-file-list="false"
-        ref="fileUpload"
+      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers" :limit="props.limit">
-        class="avatar-uploader"
+      <slot>
-        :action="props.uploadFileUrl"
+        123<img v-if="imageUrl" :src="imageUrl" class="avatar" />
-        :show-file-list="false"
+        <el-icon v-else class="avatar-uploader-icon">
-        :on-success="handleAvatarSuccess"
+          <Plus />
-        :before-upload="beforeAvatarUpload"
+        </el-icon>
-        :headers="headers"
+      </slot>
-    >
-      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
     </el-upload>
   </div>
 </template>
 
 <script setup lang="ts" name="upload-image">
 
-import {useMessage} from "/@/hooks/message";
+import { useMessage } from "/@/hooks/message";
-import {Session} from "/@/utils/storage";
+import { Local, Session } from "/@/utils/storage";
-import {watch} from "vue";
+import { watch } from "vue";
 
 const imageUrl = ref('')
 const fileUpload = ref()
-const emit = defineEmits(['update:value','change']);
+const emit = defineEmits(['update:value', 'change']);
 
 const props = defineProps({
   value: [String, Array],
@@ -34,32 +31,36 @@ const props = defineProps({
     type: Number,
     default: 5,
   },
+  limit: {
+    type: Number,
+    default: 1,
+  },
   uploadFileUrl: {
     type: String,
     default: '/admin/sys-file/upload'
   }
 });
 
-watch(() => props.value,(val) => {
+watch(() => props.value, (val) => {
-  if(val){
+  if (val) {
     imageUrl.value = val
   }
-},{ deep: true, immediate: true })
+}, { deep: true, immediate: true })
 
 
 const handleAvatarSuccess = (res, file) => {
-  if(res.code === 0){
+  if (res.code === 0) {
     imageUrl.value = res.data.url
     emit("change", imageUrl.value);
     emit("update:value", imageUrl.value);
-  }else{
+  } else {
     fileUpload.value.handleRemove(file);
   }
 }
 
 const beforeAvatarUpload = (rawFile: any) => {
-  if (rawFile.type !== 'image/jpeg') {
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
-    useMessage().error(`文件格式不正确, 请上传 image/jpeg 格式文件!`)
+    useMessage().error(`文件格式不正确, 请上传 jpeg/png格式文件!`)
     return false
   }
   // 校检文件大小
@@ -73,14 +74,12 @@ const beforeAvatarUpload = (rawFile: any) => {
   return true
 }
 
-const headers = reactive({
+const headers = computed(() => {
-  Authorization: ''
+  const tenantId = Local.get("tenantId") ? Local.get("tenantId") : 1
-})
+  return {
-
+    'Authorization': "Bearer " + Session.get("token"),
-onMounted(() => {
+    'TENANT-ID': tenantId
-  if (Session.get('token')) {
+  };
-    headers.Authorization = `Bearer ${Session.get('token')}`;
-  }
 })
 
 </script>
@@ -107,7 +106,7 @@ onMounted(() => {
   text-align: center;
 }
 
-.avatar{
+.avatar {
   width: 178px;
   height: 100%;
 }

src/components/Upload/index.vue

@@ -1,20 +1,14 @@
 <!--文件上传组件-->
 <template>
   <div class="upload-file">
-    <el-upload
+    <el-upload multiple :action="props.uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList"
-        multiple
+      :limit="limit" :on-error="handleUploadError" :on-success="handleUploadSuccess" :on-remove="handleRemove"
-        :action="props.uploadFileUrl"
+      :headers="headers" class="upload-file-uploader" ref="fileUpload" :auto-upload="false" drag>
-        :before-upload="handleBeforeUpload"
+      <i class="el-icon-upload"></i>
-        :file-list="fileList"
+      <div class="el-upload__text">
-        :limit="limit"
+        将文件拖到此处，或
-        :on-error="handleUploadError"
+        <em>点击上传</em>
-        :on-success="handleUploadSuccess"
+      </div>
-        :on-remove="handleRemove"
-        :headers="headers"
-        class="upload-file-uploader"
-        ref="fileUpload"
-    >
-      <el-button type="primary">选取文件</el-button>
       <template #tip>
         <div class="el-upload__tip" v-if="props.isShowTip">
           请上传
@@ -28,8 +22,8 @@
 </template>
 
 <script setup lang="ts" name="upload-file">
-import {useMessage} from "/@/hooks/message";
+import { useMessage } from "/@/hooks/message";
-import {Session} from "/@/utils/storage";
+import { Local, Session } from "/@/utils/storage";
 
 const props = defineProps({
   value: [String, Array],
@@ -46,7 +40,7 @@ const props = defineProps({
   // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
-    default: () => ["doc", "xls", "ppt", "txt", "pdf","docx", "xlsx", "pptx"],
+    default: () => ['png', 'jpg', 'jpeg', "doc", "xls", "ppt", "txt", "pdf", "docx", "xlsx", "pptx"],
   },
   // 是否显示提示
   isShowTip: {
@@ -59,25 +53,24 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['update:modelValue','change']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
-const number = ref(0);
+const number = ref(0)
-const fileList = ref([]);
+const fileList = ref([]) as any
-const uploadList = ref([]);
+const uploadList = ref([]) as any
 const fileUpload = ref()
-const headers = reactive({
-  Authorization: ''
-})
 
 
-onMounted(() => {
+const headers = computed(() => {
-  if (Session.get('token')) {
+  const tenantId = Local.get("tenantId") ? Local.get("tenantId") : 1
-    headers.Authorization = `Bearer ${Session.get('token')}`;
+  return {
-  }
+    'Authorization': "Bearer " + Session.get("token"),
+    'TENANT-ID': tenantId
+  };
 })
 
 // 上传前校检格式和大小
-const handleBeforeUpload = (file: File) =>  {
+const handleBeforeUpload = (file: File) => {
   // 校检文件类型
   if (props.fileType.length) {
     const fileName = file.name.split('.');
@@ -101,7 +94,7 @@ const handleBeforeUpload = (file: File) =>  {
 }
 
 // 上传成功回调
-function handleUploadSuccess(res, file) {
+function handleUploadSuccess(res: any, file: any) {
   if (res.code === 0) {
     uploadList.value.push({ name: res.data.fileName, url: res.data.url });
     uploadedSuccessfully();
@@ -114,7 +107,7 @@ function handleUploadSuccess(res, file) {
 }
 
 // 上传结束处理
-const uploadedSuccessfully = () =>  {
+const uploadedSuccessfully = () => {
   if (number.value > 0 && uploadList.value.length === number.value) {
     fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
     uploadList.value = [];
@@ -129,7 +122,7 @@ const handleRemove = (file: any) => {
 }
 
 // 对象转成指定字符串分隔
-const listToString = (list, separator = ',') =>  {
+const listToString = (list, separator = ',') => {
   let strs = "";
   separator = separator || ",";
   for (let i in list) {
@@ -161,7 +154,7 @@ watch(() => props.value, val => {
     fileList.value = [];
     return [];
   }
-},{ deep: true, immediate: true });
+}, { deep: true, immediate: true });
 
 
 </script>

src/views/admin/dict/index.vue

@@ -55,7 +55,7 @@
         <el-table-column label="操作" width="200">
           <template #default="scope">
             <el-button text type="primary" @click="onOpenEditDic('edit', scope.row)">修改</el-button>
-            <el-button text type="primary" v-if="scope.row.systemFlag !== '1'"
+            <el-button text type="primary" :disabled="scope.row.systemFlag !== '1'"
               @click="handleDelete([scope.row.id])">删除</el-button>
             <el-button text type="primary" @click="showDictITem(scope.row)">字典项</el-button>
           </template>

src/views/admin/file/form.vue

@@ -1,17 +1,6 @@
 <template>
   <el-dialog title="上传文件" v-model="visible" :close-on-click-modal="false" draggable>
-    <el-upload class="upload-demo" drag action="/admin/sys-file/upload" :headers="headers" multiple @success="success">
+    <upload @change="success" />
-      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-      <div class="el-upload__text">
-        拖拽到这个位置或者<em>点击上传</em>
-      </div>
-      <template #tip>
-        <div class="el-upload__tip">
-          上传同步至文件服务器
-        </div>
-      </template>
-    </el-upload>
-
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
@@ -21,23 +10,12 @@
 </template>
 
 <script setup lang="ts" name="SysFileDialog">
-// 定义子组件向父组件传值/事件
+const Upload = defineAsyncComponent(() => import('/@/components/Upload/index.vue'))
-import { Local } from "/@/utils/storage";
-import { Session } from "/@/utils/storage";
 
 const emit = defineEmits(['refresh']);
 
 // 定义变量内容
 const visible = ref(false)
-// 定义字典
-
-const headers = computed(() => {
-  const tenantId = Local.get("tenantId") ? Local.get("tenantId") : 1
-  return {
-    'Authorization': "Bearer " + Session.get("token"),
-    'TENANT-ID': tenantId
-  };
-})
 
 // 打开弹窗
 const openDialog = () => {

src/views/admin/file/index.vue

@@ -64,7 +64,6 @@ import { downBlobFile } from "/@/utils/other";
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
-const UploadImage = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'))
 const { t } = useI18n()
 
 // 定义变量内容
@@ -96,8 +95,7 @@ const resetQuery = () => {
 
 // 文件下载
 const download = (row: any) => {
-  downBlobFile("/admin/sys-file/" + row.bucketName + "/" + row.fileName, null, row.fileName
+  downBlobFile("/admin/sys-file/" + row.bucketName + "/" + row.fileName, null, row.fileName);
-  );
 }
 
 // 多选事件

src/views/admin/param/index.vue

@@ -58,7 +58,7 @@
               $t('common.editBtn')
             }}
             </el-button>
-            <el-button text v-if="scope.row.systemFlag !== '1'" type="primary"
+            <el-button text :disabled="scope.row.systemFlag === '1'" type="primary"
               @click="handleDelete([scope.row.publicId])">{{
                 $t('common.delBtn')
               }}
@@ -118,7 +118,7 @@ const resetQuery = () => {
   getDataList()
 }
 
-// 是否可以多选 
+// 是否可以多选
 const handleSelectable = (row: any) => {
   // 系统类不可多选删除
   return row.systemFlag !== '1'

src/views/personal/index.vue

@@ -6,10 +6,12 @@
 				<el-card shadow="hover" header="个人信息">
 					<div class="personal-user">
 						<div class="personal-user-left">
-							<el-upload class="h100 personal-user-left-upload" action="/admin/sys-file/upload"
+							<image-upload class="h100 personal-user-left-upload" @change="handleAvatarSuccess">
-								:headers="headers" :on-success="handleAvatarSuccess" :limit="1">
+								<img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
-								<img :src="formData.avatar" />
+								<el-icon v-else class="avatar-uploader-icon">
-							</el-upload>
+									<Plus />
+								</el-icon>
+							</image-upload>
 						</div>
 						<div class="personal-user-right">
 							<el-row>
@@ -50,7 +52,7 @@
 			<el-col :span="24">
 				<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
 					<div class="personal-edit-title">基本信息</div>
-					<el-form :model="formData"  :rules="ruleForm" label-width="100px" class="mt35 mb35"
+					<el-form :model="formData" :rules="ruleForm" label-width="100px" class="mt35 mb35"
 						ref="formdataRef">
 						<el-row :gutter="35">
 							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
@@ -148,10 +150,12 @@ import { formatAxis } from '/@/utils/formatTime';
 import { useUserInfo } from '/@/stores/userInfo';
 import { editInfo } from '/@/api/admin/user'
 import { useMessage } from "/@/hooks/message";
-import { Session } from "/@/utils/storage";
 import { rule } from "/@/utils/validate";
 import other from '/@/utils/other';
 
+
+const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'))
+
 // 定义变量内容
 const formData = reactive({
 	username: '',
@@ -181,26 +185,19 @@ const ruleForm = reactive({
 	}]
 })
 
-
-const handleAvatarSuccess = (res: any) => {
-	formData.avatar = res.data.url;
-}
-
-
-const headers = computed(() => {
-	const tenantId = Session.get("tenantId")
-	return {
-		'Authorization': "Bearer " + Session.get("token"),
-		'TENANT-ID': tenantId ? tenantId : '1'
-	};
-})
-
 onMounted(() => {
 	const data = useUserInfo().userInfos
 	Object.assign(formData, data.user)
 	formData.password = ''
 })
 
+// 头像上传成功
+const handleAvatarSuccess = (url: any) => {
+	formData.avatar = url;
+}
+
+
+// 保存用户
 const handleSaveUser = () => {
 	formdataRef.value.validate((valid: boolean) => {
 		if (!valid) {
@@ -439,4 +436,17 @@ const handleClick = (thirdpart: string) => {
 		}
 	}
 }
+
+.el-icon.avatar-uploader-icon {
+	font-size: 28px;
+	color: #8c939d;
+	width: 178px;
+	height: 178px;
+	text-align: center;
+}
+
+.avatar {
+	width: 178px;
+	height: 100%;
+}
 </style>