From 3c34888959fccc5937dd037880fbe0aae307c1b1 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Wed, 20 Jul 2022 13:05:09 +0800
Subject: [PATCH] fix: upload

---
 yudao-ui-admin-vue3/src/components/Editor/src/Editor.vue      |  31 ++++++++++++++++++++++++++++++-
 yudao-ui-admin-vue3/src/views/infra/file/fileList.data.ts     |  53 -----------------------------------------------------
 yudao-ui-admin-vue3/src/views/infra/file/index.vue            | 192 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 yudao-ui-admin-vue3/src/views/infra/fileList/fileList.data.ts |  53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 yudao-ui-admin-vue3/src/views/infra/fileList/index.vue        | 192 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 yudao-ui-admin-vue3/src/views/system/user/index.vue           |   7 +++----
 6 files changed, 278 insertions(+), 250 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/views/infra/file/fileList.data.ts
 delete mode 100644 yudao-ui-admin-vue3/src/views/infra/file/index.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/infra/fileList/fileList.data.ts
 create mode 100644 yudao-ui-admin-vue3/src/views/infra/fileList/index.vue

diff --git a/yudao-ui-admin-vue3/src/components/Editor/src/Editor.vue b/yudao-ui-admin-vue3/src/components/Editor/src/Editor.vue
index 6a02791..f623b73 100644
--- a/yudao-ui-admin-vue3/src/components/Editor/src/Editor.vue
+++ b/yudao-ui-admin-vue3/src/components/Editor/src/Editor.vue
@@ -6,6 +6,7 @@ import { propTypes } from '@/utils/propTypes'
 import { isNumber } from '@/utils/is'
 import { ElMessage } from 'element-plus'
 import { useLocaleStore } from '@/store/modules/locale'
+import { getAccessToken, getTenantId } from '@/utils/auth'
 
 const localeStore = useLocaleStore()
 
@@ -80,12 +81,40 @@ const editorConfig = computed((): IEditorConfig => {
       },
       autoFocus: false,
       scroll: true,
+      MENU_CONF: {
+        ['uploadImage']: {
+          server: import.meta.env.VITE_UPLOAD_URL,
+          // 单个文件的最大体积限制，默认为 2M
+          maxFileSize: 2 * 1024 * 1024,
+          // 最多可上传几个文件，默认为 100
+          maxNumberOfFiles: 10,
+          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+          allowedFileTypes: ['image/*'],
+
+          // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
+          meta: {},
+          // 将 meta 拼接到 url 参数中，默认 false
+          metaWithUrl: false,
+
+          // 自定义增加 http  header
+          headers: {
+            Accept: 'image/*',
+            Authorization: 'Bearer ' + getAccessToken(),
+            'tenant-id': getTenantId()
+          },
+
+          // 跨域是否传递 cookie ，默认为 false
+          withCredentials: false,
+
+          // 超时时间，默认为 10 秒
+          timeout: 5 * 1000 // 5 秒
+        }
+      },
       uploadImgShowBase64: true
     },
     props.editorConfig || {}
   )
 })
-
 const editorStyle = computed(() => {
   return {
     height: isNumber(props.height) ? `${props.height}px` : props.height
diff --git a/yudao-ui-admin-vue3/src/views/infra/file/fileList.data.ts b/yudao-ui-admin-vue3/src/views/infra/file/fileList.data.ts
deleted file mode 100644
index 6984e69..0000000
--- a/yudao-ui-admin-vue3/src/views/infra/file/fileList.data.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { reactive } from 'vue'
-import { useI18n } from '@/hooks/web/useI18n'
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index',
-    form: {
-      show: false
-    },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: '文件名',
-    field: 'path',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: 'URL',
-    field: 'url'
-  },
-  {
-    label: '文件类型',
-    field: 'type'
-  },
-  {
-    label: t('common.createTime'),
-    field: 'createTime',
-    form: {
-      show: false
-    }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '300px',
-    form: {
-      show: false
-    },
-    detail: {
-      show: false
-    }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/infra/file/index.vue b/yudao-ui-admin-vue3/src/views/infra/file/index.vue
deleted file mode 100644
index d7b93f7..0000000
--- a/yudao-ui-admin-vue3/src/views/infra/file/index.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import dayjs from 'dayjs'
-import { ElMessage, ElUpload, UploadInstance, UploadRawFile, ElImage } from 'element-plus'
-import { useTable } from '@/hooks/web/useTable'
-import { useI18n } from '@/hooks/web/useI18n'
-import type { FileVO } from '@/api/infra/file/types'
-import { allSchemas } from './fileList.data'
-import * as FileApi from '@/api/infra/file'
-import { useCache } from '@/hooks/web/useCache'
-const { wsCache } = useCache()
-const { t } = useI18n() // 国际化
-
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<FileVO>({
-  getListApi: FileApi.getFilePageApi,
-  delListApi: FileApi.deleteFileApi
-})
-const { getList, setSearchParams, delList } = methods
-// ========== 上传相关 ==========
-const uploadDialogVisible = ref(false)
-const uploadDialogTitle = ref('上传')
-const updateSupport = ref(0)
-const uploadDisabled = ref(false)
-const uploadRef = ref<UploadInstance>()
-let updateUrl = import.meta.env.VITE_UPLOAD_URL
-const uploadHeaders = ref()
-// 文件上传之前判断
-const beforeUpload = (file: UploadRawFile) => {
-  const isImg = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
-  const isLt5M = file.size / 1024 / 1024 < 5
-  if (!isImg) ElMessage.error('上传文件只能是 xls / xlsx 格式!')
-  if (!isLt5M) ElMessage.error('上传文件大小不能超过 5MB!')
-  return isImg && isLt5M
-}
-// 处理上传的文件发生变化
-// const handleFileChange = (uploadFile: UploadFile): void => {
-//   uploadRef.value.data.path = uploadFile.name
-// }
-// 文件上传
-const submitFileForm = () => {
-  uploadHeaders.value = {
-    Authorization: 'Bearer ' + wsCache.get('ACCESS_TOKEN'),
-    'tenant-id': wsCache.get('tenantId')
-  }
-  uploadDisabled.value = true
-  uploadRef.value!.submit()
-}
-// 文件上传成功
-const handleFileSuccess = (response: any): void => {
-  if (response.code !== 0) {
-    ElMessage.error(response.msg)
-    return
-  }
-  ElMessage.success('上传成功')
-  getList()
-  uploadDialogVisible.value = false
-  uploadDisabled.value = false
-}
-// 文件数超出提示
-const handleExceed = (): void => {
-  ElMessage.error('最多只能上传一个文件！')
-}
-// 上传错误提示
-const excelUploadError = (): void => {
-  ElMessage.error('导入数据失败，请您重新上传！')
-}
-// ========== 详情相关 ==========
-const detailRef = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('') // 弹出层标题
-// 删除操作
-const handleDelete = (row: FileVO) => {
-  delList(row.id, false)
-}
-// 详情操作
-const handleDetail = (row: FileVO) => {
-  // 设置数据
-  detailRef.value = row
-  dialogTitle.value = t('action.detail')
-  dialogVisible.value = true
-}
-// ========== 初始化 ==========
-getList()
-</script>
-
-<template>
-  <!-- 搜索工作区 -->
-  <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <el-button type="primary" @click="uploadDialogVisible = true">
-      <Icon icon="ep:upload" class="mr-5px" /> 上传文件
-    </el-button>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #url="{ row }">
-        <el-image
-          v-if="row.type === 'jpg' || 'png' || 'gif'"
-          style="width: 80px; height: 50px"
-          :src="row.url"
-          :key="row.url"
-          fit="contain"
-          lazy
-        />
-        <span v-else>{{ row.url }}</span>
-      </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button link type="primary" @click="handleDetail(row)">
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['infra:file:delete']"
-          @click="handleDelete(row)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
-        </el-button>
-      </template>
-    </Table>
-  </ContentWrap>
-
-  <Dialog v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
-      <template #url="{ row }">
-        <el-image
-          v-if="row.type === 'jpg' || 'png' || 'gif'"
-          style="width: 100px; height: 100px"
-          :src="row.url"
-          :key="row.url"
-          lazy
-        />
-        <span>{{ row.url }}</span>
-      </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-    </Descriptions>
-    <!-- 操作按钮 -->
-    <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
-    </template>
-  </Dialog>
-  <Dialog v-model="uploadDialogVisible" :title="uploadDialogTitle" :destroy-on-close="true">
-    <el-upload
-      ref="uploadRef"
-      :action="updateUrl + '?updateSupport=' + updateSupport"
-      :headers="uploadHeaders"
-      :drag="true"
-      :limit="1"
-      :multiple="true"
-      :show-file-list="true"
-      :disabled="uploadDisabled"
-      :before-upload="beforeUpload"
-      :on-exceed="handleExceed"
-      :on-success="handleFileSuccess"
-      :on-error="excelUploadError"
-      :auto-upload="false"
-      accept=".jpg, .png, .gif"
-    >
-      <Icon icon="ep:upload-filled" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      <template #tip>
-        <div class="el-upload__tip">请上传 .jpg, .png, .gif 标准格式文件</div>
-      </template>
-    </el-upload>
-    <template #footer>
-      <el-button type="primary" @click="submitFileForm">
-        <Icon icon="ep:upload-filled" />
-        {{ t('action.save') }}
-      </el-button>
-      <el-button @click="uploadDialogVisible = false">{{ t('dialog.close') }}</el-button>
-    </template>
-  </Dialog>
-</template>
diff --git a/yudao-ui-admin-vue3/src/views/infra/fileList/fileList.data.ts b/yudao-ui-admin-vue3/src/views/infra/fileList/fileList.data.ts
new file mode 100644
index 0000000..6984e69
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/infra/fileList/fileList.data.ts
@@ -0,0 +1,53 @@
+import { reactive } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+const { t } = useI18n() // 国际化
+
+// CrudSchema
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: t('common.index'),
+    field: 'id',
+    type: 'index',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  },
+  {
+    label: '文件名',
+    field: 'path',
+    search: {
+      show: true
+    }
+  },
+  {
+    label: 'URL',
+    field: 'url'
+  },
+  {
+    label: '文件类型',
+    field: 'type'
+  },
+  {
+    label: t('common.createTime'),
+    field: 'createTime',
+    form: {
+      show: false
+    }
+  },
+  {
+    label: t('table.action'),
+    field: 'action',
+    width: '300px',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/infra/fileList/index.vue b/yudao-ui-admin-vue3/src/views/infra/fileList/index.vue
new file mode 100644
index 0000000..67f227b
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/infra/fileList/index.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import dayjs from 'dayjs'
+import { ElMessage, ElUpload, UploadInstance, UploadRawFile, ElImage } from 'element-plus'
+import { useTable } from '@/hooks/web/useTable'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { FileVO } from '@/api/infra/file/types'
+import { allSchemas } from './fileList.data'
+import * as FileApi from '@/api/infra/file'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+
+const { t } = useI18n() // 国际化
+
+// ========== 列表相关 ==========
+const { register, tableObject, methods } = useTable<FileVO>({
+  getListApi: FileApi.getFilePageApi,
+  delListApi: FileApi.deleteFileApi
+})
+const { getList, setSearchParams, delList } = methods
+// ========== 上传相关 ==========
+const uploadDialogVisible = ref(false)
+const uploadDialogTitle = ref('上传')
+const updateSupport = ref(0)
+const uploadDisabled = ref(false)
+const uploadRef = ref<UploadInstance>()
+let updateUrl = import.meta.env.VITE_UPLOAD_URL
+const uploadHeaders = ref()
+// 文件上传之前判断
+const beforeUpload = (file: UploadRawFile) => {
+  const isImg = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
+  const isLt5M = file.size / 1024 / 1024 < 5
+  if (!isImg) ElMessage.error('上传文件只能是 jpeg / gif / png 格式!')
+  if (!isLt5M) ElMessage.error('上传文件大小不能超过 5MB!')
+  return isImg && isLt5M
+}
+// 处理上传的文件发生变化
+// const handleFileChange = (uploadFile: UploadFile): void => {
+//   uploadRef.value.data.path = uploadFile.name
+// }
+// 文件上传
+const submitFileForm = () => {
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
+  }
+  uploadDisabled.value = true
+  uploadRef.value!.submit()
+}
+// 文件上传成功
+const handleFileSuccess = (response: any): void => {
+  if (response.code !== 0) {
+    ElMessage.error(response.msg)
+    return
+  }
+  ElMessage.success('上传成功')
+  getList()
+  uploadDialogVisible.value = false
+  uploadDisabled.value = false
+}
+// 文件数超出提示
+const handleExceed = (): void => {
+  ElMessage.error('最多只能上传一个文件！')
+}
+// 上传错误提示
+const excelUploadError = (): void => {
+  ElMessage.error('导入数据失败，请您重新上传！')
+}
+// ========== 详情相关 ==========
+const detailRef = ref() // 详情 Ref
+const dialogVisible = ref(false) // 是否显示弹出层
+const dialogTitle = ref('') // 弹出层标题
+// 删除操作
+const handleDelete = (row: FileVO) => {
+  delList(row.id, false)
+}
+// 详情操作
+const handleDetail = (row: FileVO) => {
+  // 设置数据
+  detailRef.value = row
+  dialogTitle.value = t('action.detail')
+  dialogVisible.value = true
+}
+// ========== 初始化 ==========
+getList()
+</script>
+
+<template>
+  <!-- 搜索工作区 -->
+  <ContentWrap>
+    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
+  </ContentWrap>
+  <ContentWrap>
+    <el-button type="primary" @click="uploadDialogVisible = true">
+      <Icon icon="ep:upload" class="mr-5px" /> 上传文件
+    </el-button>
+    <!-- 列表 -->
+    <Table
+      :columns="allSchemas.tableColumns"
+      :selection="false"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }"
+      v-model:pageSize="tableObject.pageSize"
+      v-model:currentPage="tableObject.currentPage"
+      @register="register"
+    >
+      <template #url="{ row }">
+        <el-image
+          v-if="row.type === 'jpg' || 'png' || 'gif'"
+          style="width: 80px; height: 50px"
+          :src="row.url"
+          :key="row.url"
+          fit="contain"
+          lazy
+        />
+        <span v-else>{{ row.url }}</span>
+      </template>
+      <template #createTime="{ row }">
+        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+      </template>
+      <template #action="{ row }">
+        <el-button link type="primary" @click="handleDetail(row)">
+          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          v-hasPermi="['infra:file:delete']"
+          @click="handleDelete(row)"
+        >
+          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
+        </el-button>
+      </template>
+    </Table>
+  </ContentWrap>
+
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <!-- 对话框(详情) -->
+    <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
+      <template #url="{ row }">
+        <el-image
+          v-if="row.type === 'jpg' || 'png' || 'gif'"
+          style="width: 100px; height: 100px"
+          :src="row.url"
+          :key="row.url"
+          lazy
+        />
+        <span>{{ row.url }}</span>
+      </template>
+      <template #createTime="{ row }">
+        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+      </template>
+    </Descriptions>
+    <!-- 操作按钮 -->
+    <template #footer>
+      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+    </template>
+  </Dialog>
+  <Dialog v-model="uploadDialogVisible" :title="uploadDialogTitle" :destroy-on-close="true">
+    <el-upload
+      ref="uploadRef"
+      :action="updateUrl + '?updateSupport=' + updateSupport"
+      :headers="uploadHeaders"
+      :drag="true"
+      :limit="1"
+      :multiple="true"
+      :show-file-list="true"
+      :disabled="uploadDisabled"
+      :before-upload="beforeUpload"
+      :on-exceed="handleExceed"
+      :on-success="handleFileSuccess"
+      :on-error="excelUploadError"
+      :auto-upload="false"
+      accept=".jpg, .png, .gif"
+    >
+      <Icon icon="ep:upload-filled" />
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <template #tip>
+        <div class="el-upload__tip">请上传 .jpg, .png, .gif 标准格式文件</div>
+      </template>
+    </el-upload>
+    <template #footer>
+      <el-button type="primary" @click="submitFileForm">
+        <Icon icon="ep:upload-filled" />
+        {{ t('action.save') }}
+      </el-button>
+      <el-button @click="uploadDialogVisible = false">{{ t('dialog.close') }}</el-button>
+    </template>
+  </Dialog>
+</template>
diff --git a/yudao-ui-admin-vue3/src/views/system/user/index.vue b/yudao-ui-admin-vue3/src/views/system/user/index.vue
index 21db798..482925d 100644
--- a/yudao-ui-admin-vue3/src/views/system/user/index.vue
+++ b/yudao-ui-admin-vue3/src/views/system/user/index.vue
@@ -30,9 +30,8 @@ import { listSimplePostsApi } from '@/api/system/post'
 import { rules, allSchemas } from './user.data'
 import * as UserApi from '@/api/system/user'
 import download from '@/utils/download'
-import { useCache } from '@/hooks/web/useCache'
 import { CommonStatusEnum } from '@/utils/constants'
-const { wsCache } = useCache()
+import { getAccessToken, getTenantId } from '@/utils/auth'
 interface Tree {
   id: number
   name: string
@@ -216,8 +215,8 @@ const beforeExcelUpload = (file: UploadRawFile) => {
 const uploadRef = ref<UploadInstance>()
 const submitFileForm = () => {
   uploadHeaders.value = {
-    Authorization: 'Bearer ' + wsCache.get('ACCESS_TOKEN'),
-    'tenant-id': wsCache.get('tenantId')
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
   }
   uploadDisabled.value = true
   uploadRef.value!.submit()
--
libgit2 0.21.4