文件上传

src/api/system/extend.js

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-
+import {upload} from '@/utils/request'
 // 查询机构扩展列表
 export function listExtend(query) {
   return request({
@@ -23,7 +23,13 @@ export function getExtendByOrgId(id) {
     method: 'get'
   })
 }
-
+// 文件上传
+export function uploadFile(formDatas) {
+  return upload({
+    url: '/file/file/upload',
+    FormData: formDatas
+  })
+}
 // 新增机构扩展
 export function addExtend(data) {
   return request({

src/utils/request.js

@@ -152,5 +152,20 @@ export function download(url, params, filename, config) {
     downloadLoadingInstance.close();
   })
 }
-
+export function upload(url, params, filename, config) { 
+  
+  try {
+    service.post(url, params, { headers: {
+      'Content-Type': 'multipart/form-data',
+    },}).then((data) => {
+      // 处理上传成功的逻辑
+      console.log('上传成功', data);
+    });
+    
+   
+  } catch (error) {
+    // 处理上传失败的逻辑
+    console.log('上传失败', error);
+  }
+ }
 export default service

src/views/system/dept/extend.vue

@@ -232,10 +232,14 @@
         <el-avatar shape="square" :size="100" :src="squareUrl"></el-avatar>
       </div> -->
         <div class="image-container" style="margin-left: 20px">
-          <el-image :src="uploadp" fit="contain"></el-image>
+          <el-image class="zoom-image border-color-change" :src="uploadp" fit="contain" @click="triggerFileInput"></el-image>
+          <input type="file"
+      ref="fileInput"
+      @change="handleFileChange"
+      style="display: none;"/>
         </div>
         <div class="image-container" style="margin-right: 0">
-          <el-image :src="uplp" fit="contain"></el-image>
+          <el-image class="zoom-image border-color-change" :src="uplp" fit="contain"></el-image>
         </div>
       </div>
       <div div-lc-mark style="margin-top: 10px">
@@ -483,6 +487,7 @@
 <script>
 import uploadpng from "@/assets/images/upload.png";
 import uplpng from "@/assets/images/upl.png";
+import request from '@/utils/request'
 import {
   listExtend,
   getExtend,
@@ -490,6 +495,7 @@ import {
   updateExtend,
   delExtend,
   getExtendByOrgId,
+  uploadFile,
 } from "@/api/system/extend";
 import {
   listDept,
@@ -887,6 +893,44 @@ export default {
     nosaveExtend() {
       this.$router.go(-1);
     },
+    triggerFileInput() {
+      this.$refs.fileInput.click();
+    },
+    async handleFileChange(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+
+      // 创建 FormData 对象并添加文件
+      const formData = new FormData();
+      formData.append('file', file);
+
+      // // 发送文件到您的文件上传 API
+      try {
+        uploadFile(formData).then((res) => {
+          console.log(res);
+          // this.orgform.certificateEvidence = res.data;
+        });
+        // 处理上传成功的逻辑
+        console.log('上传成功');
+      } catch (error) {
+        // 处理上传失败的逻辑
+        console.log('上传失败');
+      }
+      // try {
+      //   const response = await request.post('http://localhost:9527/dev-api/file/file/upload', formData, {
+      //     headers: {
+      //       'Content-Type': 'multipart/form-data',
+      //     },
+      //   });
+      //   // 处理上传成功的逻辑
+      //   console.log('上传成功', response);
+      // } catch (error) {
+      //   // 处理上传失败的逻辑
+      //   console.log('上传失败', error);
+      // }
+      // 重置 input 元素，以便下次选择相同文件时仍能触发 change 事件
+      event.target.value = '';
+    },
   },
   fillter: {},
 };
@@ -905,4 +949,19 @@ export default {
   height: 200px;
   margin-right: 20px; /* 设置与下一个div的水平间距 */
 }
+.zoom-image {
+  transition: transform 0.3s ease;
+}
+
+.zoom-image:hover {
+  transform: scale(1.25);
+}
+.border-color-change {
+  border: 2px solid #ccc;
+  transition: border-color 0.3s ease;
+}
+
+.border-color-change:hover {
+  border-color: #1ea8e9; /* 您可以将此颜色更改为所需的颜色 */
+}
 </style>