fix: 更改上传图片

src/views/is/func/FunctionTable/FunctionDialog.vue

@@ -22,7 +22,28 @@
         </el-select>
       </el-form-item>
       <el-form-item label="上传图片">
-        <FileUpload v-model="imgUrl" :limit="1" :fileSize="5" :fileType="['png', 'jpg', 'jpeg']" />
+        <!-- <FileUpload v-model="imgUrl" :limit="1" :uploadUrl="'/system/file/upload'" :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
@@ -41,12 +62,19 @@
       </span>
     </template>
   </el-dialog>
+
+  <el-dialog v-model="dialogVisible">
+    <img :src="dialogImageUrl" alt="Preview Image" />
+  </el-dialog>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
 import FileUpload from '@/components/FileUpload/index'
 import { useDict } from '@/utils/dict'
+import {getToken} from "@/utils/auth.js";
+import {supportType} from "@/enum/index.js";
+import { ElMessage } from 'element-plus';
 
 const props = defineProps({
   visible: {
@@ -79,6 +107,50 @@ const visible = ref(props.visible)
 
 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
+}
+
 watch(() => props.visible, (newVal) => {
   visible.value = newVal
   if (props.formData.iconUrl) {

src/views/is/func/FunctionTable/FunctionTable.vue

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