fix：界面管理上传图片

src/views/is/im/Table/Dialog.vue

@@ -22,7 +22,27 @@
         </el-select>
       </el-form-item>
       <el-form-item label="上传图片">
-        <FileUpload v-model="imgUrl" :limit="1" :fileSize="5" :fileType="['png', 'jpg', 'jpeg']" />
+        <el-upload
+          v-model:file-list="uploadFileList"
+          :action="`${data.baseUrl}/system/file/upload`"
+          :before-upload="beforeAvatarUpload"
+          :data="{fileType:uploadFileType}"
+          :headers="{
+                'authorization':  getToken()
+              }"
+          :limit="1"
+          :on-error="uploadError"
+          :on-success="uploadSuccess"
+          class="file-uploader"
+          :on-preview="handlePictureCardPreview"
+        >
+          <el-button type="primary">选取文件</el-button>
+          <template #tip>
+            <div class="el-upload__tip">
+              支持格式：'png', 'jpg', 'jpeg'，大小不超过5MB
+            </div>
+          </template>
+        </el-upload>
       </el-form-item>
       <el-form-item label="描述" prop="remark">
         <el-input
@@ -48,6 +68,8 @@ import { ref, watch } from 'vue'
 import { useDict } from '@/utils/dict'
 import FunctionSelection from './FunctionSelection.vue'
 import { ElMessage } from 'element-plus'
+import { getToken } from "@/utils/auth.js";
+import { supportType } from "@/enum/index.js";
 
 const props = defineProps({
   visible: {
@@ -70,6 +92,51 @@ const props = defineProps({
 const emit = defineEmits(['update:visible', 'confirm'])
 
 const imgUrl = ref('')
+const uploadFileList = ref([])
+const uploadFileType = ref(null)
+const data = {
+  baseUrl: import.meta.env.VITE_APP_BASE_API
+}
+
+const beforeAvatarUpload = (rawFile) => {
+  const fileName = rawFile.name.split('.');
+  const fileExt = fileName[fileName.length - 1];
+  const isTypeOk = ['png', 'jpg', 'jpeg'].indexOf(fileExt) >= 0;
+  if (!isTypeOk) {
+    proxy.$modal.msgError(`文件格式不正确，请上传${['png', 'jpg', 'jpeg'].join("/")}格式文件!`);
+    return false;
+  }
+  const {label = undefined, value = undefined} = supportType?.find(item => item.label === rawFile.type)
+  if (label) {
+    uploadFileType.value = value
+  }
+  // 校检文件大小
+  
+  const isLt = rawFile.size / 1024 / 1024 < 5;
+  if (!isLt) {
+    ElMessage.error(`上传文件大小不能超过 ${5} MB!`);
+    return false;
+  }
+  
+  return true
+}
+
+const uploadSuccess = (e) => {
+  imgUrl.value = e.msg
+  ElMessage.success('上传成功')
+}
+const uploadError = (e) => {
+  console.log("uploadError", e)
+}
+
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+
+const handlePictureCardPreview = (uploadFile) => {
+  dialogImageUrl.value = uploadFile.response.msg
+  dialogVisible.value = true
+}
+
 const { ti_ui_config } = useDict("ti_ui_config");
 
 const formRef = ref()
@@ -87,6 +154,13 @@ watch(() => props.visible, (newVal) => {
   visible.value = newVal
   if (props.formData.uiUrl) {
     imgUrl.value = props.formData.uiUrl
+    uploadFileList.value = [{
+      name: 'image',
+      url: props.formData.uiUrl,
+      response: {
+        msg: props.formData.uiUrl
+      }
+    }]
   }
   if (props.formData.funcIds) {
     selectIds.value = props.formData.funcIds.split(',')

src/views/is/im/Table/FunctionSelection.vue

@@ -19,7 +19,7 @@
           <el-image 
             v-if="row.iconUrl"
             style="height: 32px"
-            :src="getImgUrl(row.iconUrl)"
+            :src="row.iconUrl"
             @click="showViewer(row.iconUrl)">
           </el-image>
         </template>
@@ -85,7 +85,7 @@
             <el-image 
               v-if="row.iconUrl"
               style="height: 32px"
-              :src="getImgUrl(row.iconUrl)"
+              :src="row.iconUrl"
               @click="showViewer(row.iconUrl)">
             </el-image>
           </template>
@@ -102,7 +102,7 @@
     <!-- 手动控制的预览组件，append-to-body 使其挂载到 body 末尾 -->
     <ElImageViewer
       v-if="isViewerOpen"
-      :url-list="[getImgUrl(currentImage)]"
+      :url-list="[currentImage]"
       @close="closeViewer"
       append-to-body
     />
@@ -219,10 +219,6 @@ const formatFuncName = (funcKey) => {
   return dict?.label || ''
 }
 
-const getImgUrl = (url) => {
-  return import.meta.env.VITE_API_URL + url
-}
-
 const isViewerOpen = ref(false);
 const currentImage = ref('');
 

src/views/is/im/Table/Table.vue

@@ -46,7 +46,7 @@
           <el-image 
             v-if="row.uiUrl"
             style="height: 32px"
-            :src="getImgUrl(row.uiUrl)"
+            :src="row.uiUrl"
             @click="showViewer(row.uiUrl)">
           </el-image>
         </template>
@@ -76,7 +76,7 @@
     <!-- 手动控制的预览组件，append-to-body 使其挂载到 body 末尾 -->
     <ElImageViewer
       v-if="isViewerOpen"
-      :url-list="[getImgUrl(currentImage)]"
+      :url-list="[currentImage]"
       @close="closeViewer"
       append-to-body
     />
@@ -231,10 +231,6 @@ const formatUiName = (uiKey) => {
   return dict?.label || ''
 }
 
-const getImgUrl = (url) => {
-  return import.meta.env.VITE_API_URL + url
-}
-
 const isViewerOpen = ref(false);
 const currentImage = ref('');