feat: 优化文件上传功能柜

2024-12-23 05:40:20 +08:00 · 2023-02-15 14:45:06 +08:00 · 2023-02-15 14:45:06 +08:00 · 0fd375fe26
commit 0fd375fe26
parent 822ba36246
8 changed files with 93 additions and 114 deletions
--- a/src/components/Upload/Excel.vue
+++ b/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"
--- a/src/components/Upload/Image.vue
+++ b/src/components/Upload/Image.vue
@ -2,30 +2,27 @@

 <template>
  <div>
-    <el-upload
-        ref="fileUpload"
-        class="avatar-uploader"
-        :action="props.uploadFileUrl"
-        :show-file-list="false"
-        :on-success="handleAvatarSuccess"
-        :before-upload="beforeAvatarUpload"
-        :headers="headers"
-    >
-      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+    <el-upload ref="fileUpload" class="avatar-uploader" :action="props.uploadFileUrl" :show-file-list="false"
+      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers" :limit="props.limit">
+      <slot>
+        123<img v-if="imageUrl" :src="imageUrl" class="avatar" />
+        <el-icon v-else class="avatar-uploader-icon">
+          <Plus />
+        </el-icon>
+      </slot>
    </el-upload>
  </div>
 </template>

 <script setup lang="ts" name="upload-image">

-import {useMessage} from "/@/hooks/message";
-import {Session} from "/@/utils/storage";
-import {watch} from "vue";
+import { useMessage } from "/@/hooks/message";
+import { Local, Session } from "/@/utils/storage";
+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) => {
-  if(val){
+watch(() => props.value, (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') {
-    useMessage().error(`文件格式不正确, 请上传 image/jpeg 格式文件!`)
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
+    useMessage().error(`文件格式不正确, 请上传 jpeg/png格式文件!`)
    return false
  }
  // 校检文件大小
@ -73,14 +74,12 @@ const beforeAvatarUpload = (rawFile: any) => {
  return true
 }

-const headers = reactive({
-  Authorization: ''
-})
-
-onMounted(() => {
-  if (Session.get('token')) {
-    headers.Authorization = `Bearer ${Session.get('token')}`;
-  }
+const headers = computed(() => {
+  const tenantId = Local.get("tenantId") ? Local.get("tenantId") : 1
+  return {
+    'Authorization': "Bearer " + Session.get("token"),
+    'TENANT-ID': tenantId
+  };
 })

 </script>
@ -107,7 +106,7 @@ onMounted(() => {
  text-align: center;
 }

-.avatar{
+.avatar {
  width: 178px;
  height: 100%;
 }
--- a/src/components/Upload/index.vue
+++ b/src/components/Upload/index.vue
@ -1,20 +1,14 @@
 <!--文件上传组件-->
 <template>
  <div class="upload-file">
-    <el-upload
-        multiple
-        :action="props.uploadFileUrl"
-        :before-upload="handleBeforeUpload"
-        :file-list="fileList"
-        :limit="limit"
-        :on-error="handleUploadError"
-        :on-success="handleUploadSuccess"
-        :on-remove="handleRemove"
-        :headers="headers"
-        class="upload-file-uploader"
-        ref="fileUpload"
-    >
-      <el-button type="primary">选取文件</el-button>
+    <el-upload multiple :action="props.uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList"
+      :limit="limit" :on-error="handleUploadError" :on-success="handleUploadSuccess" :on-remove="handleRemove"
+      :headers="headers" class="upload-file-uploader" ref="fileUpload" :auto-upload="false" drag>
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">
+        将文件拖到此处，或
+        <em>点击上传</em>
+      </div>
      <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 {Session} from "/@/utils/storage";
+import { useMessage } from "/@/hooks/message";
+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 fileList = ref([]);
-const uploadList = ref([]);
+const number = ref(0)
+const fileList = ref([]) as any
+const uploadList = ref([]) as any
 const fileUpload = ref()
-const headers = reactive({
-  Authorization: ''
-})


-onMounted(() => {
-  if (Session.get('token')) {
-    headers.Authorization = `Bearer ${Session.get('token')}`;
-  }
+const headers = computed(() => {
+  const tenantId = Local.get("tenantId") ? Local.get("tenantId") : 1
+  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>
--- a/src/views/admin/dict/index.vue
+++ b/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>
--- a/src/views/admin/file/form.vue
+++ b/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">
-      <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>
-
+    <upload @change="success" />
    <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">
-// 定义子组件向父组件传值/事件
-import { Local } from "/@/utils/storage";
-import { Session } from "/@/utils/storage";
+const Upload = defineAsyncComponent(() => import('/@/components/Upload/index.vue'))

 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 = () => {
--- a/src/views/admin/file/index.vue
+++ b/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);
 }

 // 多选事件
--- a/src/views/admin/param/index.vue
+++ b/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'
--- a/src/views/personal/index.vue
+++ b/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"
-								:headers="headers" :on-success="handleAvatarSuccess" :limit="1">
-								<img :src="formData.avatar" />
-							</el-upload>
+							<image-upload class="h100 personal-user-left-upload" @change="handleAvatarSuccess">
+								<img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
+								<el-icon v-else class="avatar-uploader-icon">
+									<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>