图片上传

.env.local

@@ -3,8 +3,8 @@ NODE_ENV=development
 
 VITE_DEV=true
 
-# 请求路径  http://192.168.188.149:48080  https://iot.deepoil.cc
-VITE_BASE_URL='http://172.21.10.222:8080'
+# 请求路径  http://192.168.188.149:48080  https://iot.deepoil.cc  http://172.21.10.222:8080
+VITE_BASE_URL='https://iot.deepoil.cc'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

src/views/pms/qhse/certificate.vue

@@ -207,21 +207,7 @@
       </el-form-item>
 
       <el-form-item label="证书图片" prop="certPic">
-        <el-upload
-          :action="uploadUrl"
-          :headers="uploadHeaders"
-          :on-success="handleUploadSuccess"
-          :on-remove="handleRemove"
-          :auto-upload="false"
-          list-type="picture-card"
-          :limit="1"
-          accept=".jpg,.jpeg,.png,.gif"
-        >
-          <i class="el-icon-plus"></i>
-        </el-upload>
-        <div v-if="formData.certPic" class="image-preview">
-          <img :src="formData.certPic" alt="证书图片" style="max-width: 100px; max-height: 100px" />
-        </div>
+        <UploadImage v-model="formData.certPic" />
       </el-form-item>
     </el-form>
 
@@ -246,6 +232,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 const deptList = ref<Tree[]>([]) // 树形结构
 const deptList2 = ref<Tree[]>([]) // 树形结构
 import { formatDate } from '@/utils/formatTime'
+import UploadImage from '@/components/UploadFile/src/UploadImg.vue'
 
 defineOptions({ name: 'IotQHSECertificate' })
 
@@ -296,12 +283,6 @@ const formData = ref({
   deptId: '' // 部门id
 })
 
-// 文件上传配置
-const uploadUrl = '/api/upload/file' // 请替换为实际的上传接口
-const uploadHeaders = {
-  Authorization: `Bearer ${localStorage.getItem('token')}`
-}
-
 // 获取证书类型文本
 const getCertificateTypeText = (type: string) => {
   const map: Record<string, string> = {
@@ -324,25 +305,6 @@ const getCertificateCategoryText = (category: string) => {
   return map[category] || category
 }
 
-// 获取状态标签类型
-const getTagType = (status: string) => {
-  if (status === 'valid') return 'success'
-  if (status === 'expired') return 'danger'
-  if (status === 'expiring') return 'warning'
-  return 'info'
-}
-
-// 获取状态文本
-const getStatusText = (status: string) => {
-  const map: Record<string, string> = {
-    valid: '有效',
-    expired: '已过期',
-    expiring: '即将过期',
-    pending: '待审核'
-  }
-  return map[status] || status
-}
-
 // 正确格式化日期的函数
 const formatDateCorrectly = (timestamp) => {
   if (!timestamp) return ''
@@ -440,16 +402,6 @@ const handleViewImage = (imageUrl: string) => {
   imageDialogVisible.value = true
 }
 
-// 处理文件上传成功
-const handleUploadSuccess = (response: any, file: any) => {
-  formData.value.certPic = response.data.url
-}
-
-// 处理文件删除
-const handleRemove = (file: any, fileList: any) => {
-  formData.value.certPic = ''
-}
-
 // 确保时间戳是毫秒级的
 const ensureMillisecondTimestamp = (timestamp) => {
   let time = Number(timestamp)