feat:增加图片存储模式

nginx.conf

@@ -27,7 +27,11 @@ server {
 		proxy_pass http://host.docker.internal:8082/;
 	}
 
+	location /image-api/ {
+        proxy_pass http://host.docker.internal:3000/;
+    }
+
 	location / {
 		try_files $uri $uri/ =404;
 	}
-}
+}

src/components/Bill/BillDialog.vue

@@ -1,235 +0,0 @@
-<template>
-  <el-dialog v-model="billStore.billDialog.visible"
-             title="账单内容" center class="bill-dialog"
-             @open="openDialogEvent">
-    <el-form ref="formRef" :model="billStore.billDialog.data"
-             :rules="rules" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="账本类型" prop="bookName">
-            <el-radio-group v-model="billStore.billDialog.data.bookName"
-                            @change="changeBillBookNameEvent">
-              <el-radio v-for="(item, index) in billStore.billBookList"
-                        :value="item.name" :key="index">
-                <template #default>
-                  <i :class="item.icon" :style="{color: item.color}"/>
-                  <span style="margin-left: 5px;">{{ item.name }}</span>
-                </template>
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <el-form-item label="账单类别" prop="type">
-            <el-radio-group v-model="billStore.billDialog.data.type"
-                            @change="changeBillCategoryEvent">
-              <el-radio v-for="(item, index) in billInfo.billTypeList"
-                        :value="item" :key="index">
-                {{ getBillTypeName(item) }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <el-form-item label="账单分类" prop="category">
-            <el-radio-group v-model="billStore.billDialog.data.category">
-              <el-radio v-for="(item, index) in billInfo.billCategoryList"
-                        :value="item.name" :key="index">
-                <template #default>
-                  <i :class="item.icon" :style="{color: item.color}"/>
-                  <span style="margin-left: 5px;">{{ item.name }}</span>
-                </template>
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <el-form-item label="账单时间" prop="date">
-            <el-date-picker
-                v-model="billStore.billDialog.data.date"
-                type="date" :editable="false" placeholder="请选择账单时间"
-                value-format="YYYY-MM-DD"/>
-          </el-form-item>
-
-          <el-form-item label="账单地点" prop="location">
-            <el-input v-model="billStore.billDialog.data.location" autocomplete="off"
-                      placeholder="请输入账单地点"  clearable
-                      show-word-limit maxlength="10">
-              <template #prefix>
-                <el-icon class="el-input__icon"><location/></el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-
-          <el-form-item label="账单账户" prop="payAccount">
-            <el-radio-group v-model="billStore.billDialog.data.payAccount">
-              <el-radio v-for="(item, index) in billStore.billPayList"
-                        :value="item.name" :key="index">
-                <template #default>
-                  <i :class="item.icon" :style="{color: item.color}"/>
-                  <span style="margin-left: 5px;">{{ item.name }}</span>
-                </template>
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <el-form-item label="账单金额" prop="amount">
-            <amount-input v-model="billStore.billDialog.data.amount"/>
-          </el-form-item>
-
-          <el-form-item label="账单内容" prop="content">
-            <el-input v-model="billStore.billDialog.data.content" autocomplete="off"
-                      placeholder="请输入账单内容"  clearable
-                      show-word-limit maxlength="10">
-              <template #prefix>
-                <el-icon class="el-input__icon"><document/></el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="账单备注">
-            <el-input v-model="billStore.billDialog.data.remark" type="textarea"
-                      placeholder="请输入账单备注" clearable
-                      :rows="5" show-word-limit maxlength="200">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="账单图片">
-            <upload-image v-model="billStore.billDialog.data.imageList"
-                          :service-url="fileServiceUrl"
-                          :service-file-root-path="serviceFileRootPath"
-                          :image-path="billStore.billImagePath"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="cancelClick">取消</el-button>
-        <el-button type="primary" @click="confirmClick">
-          {{ billStore.billApiType === 'UPDATE' ? '编辑' : '新增' }}
-        </el-button>
-        <el-button v-if="billStore.billApiType === 'UPDATE'"
-                   type="danger" @click="deleteClick">
-          删除
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { UploadImage, AmountInput } from 'vue3-common'
-import { useBillStore } from '@/store/bill.ts'
-import { Location, Document } from '@element-plus/icons-vue'
-import { FormRules } from 'element-plus'
-import { billRecordRules } from '@/utils/element/elRules.ts'
-import { nextTick, reactive, ref } from 'vue'
-import { IBillCategory } from '@/types/bill.ts'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
-
-const formRef = ref()
-const rules = reactive<FormRules>(billRecordRules)
-const billStore = useBillStore()
-
-const billInfo = reactive({
-  billTypeList: [] as string[],
-  billCategoryList: [] as IBillCategory[]
-})
-
-/**
- * 打开对话框事件
- */
-const openDialogEvent = async () => {
-  // 如果是新增账单 默认选择第一个账本
-  if (billStore.billApiType !== 'UPDATE') {
-    billStore.billDialog.data.bookName = billStore.billBookList[0].name
-  }
-  getBillTypeByBookName(billStore.billDialog.data.bookName)
-
-  // 如果是新增账单 默认选择一个类别
-  if (billStore.billApiType !== 'UPDATE') {
-    billStore.billDialog.data.type = billInfo.billTypeList[0]
-  }
-  getBillCategory()
-
-  // 如果是新增账单 默认选择一个分类
-  if (billStore.billApiType !== 'UPDATE') {
-    billStore.billDialog.data.category = billInfo.billCategoryList[0].name
-    billStore.billDialog.data.payAccount = billStore.billPayList[0].name
-  }
-
-  await nextTick(() => {
-    formRef.value.clearValidate()
-  })
-}
-
-/**
- * 获取账单类型名称
- * @param type 账单类型
- */
-const getBillTypeName = (type: string) => {
-  return type === 'expensive' ? '支出' : '收入'
-}
-
-/**
- * 选择账本事件
- * @param value 账本名称
- */
-const changeBillBookNameEvent = (value: string) => {
-  getBillTypeByBookName(value)
-  billStore.billDialog.data.type = billInfo.billTypeList[0]
-  getBillCategory()
-  billStore.billDialog.data.category = billInfo.billCategoryList[0].name
-}
-
-/**
- * 选择账单类别事件
- */
-const changeBillCategoryEvent = () => {
-  getBillCategory()
-  billStore.billDialog.data.category = billInfo.billCategoryList[0].name
-}
-
-/**
- * 通过账本获取账单类型
- * @param bookName 账本
- */
-const getBillTypeByBookName = (bookName: string) => {
-  billInfo.billTypeList = []
-  billStore.billCategoryList.forEach((item) => {
-    if (item.bookName === bookName && !billInfo.billTypeList.includes(item.type)) {
-      billInfo.billTypeList.push(item.type)
-    }
-  })
-}
-
-/**
- * 获取账单类别
- */
-const getBillCategory = () => {
-  billInfo.billCategoryList = billStore.billCategoryList.filter((value) => {
-    return value.bookName === billStore.billDialog.data.bookName
-        && value.type === billStore.billDialog.data.type
-  })
-}
-
-/**
- * 点击确认按钮
- */
-const confirmClick = () => {
-  formRef.value.validate().then(() => {
-    billStore.handleBillApi(billStore.billDialog.data)
-  })
-}
-
-const cancelClick = () => {
-  billStore.billDialog.visible = false
-}
-
-const deleteClick = () => {
-  commonElMessageBox('是否确认删除该账单内容?').then(() => {
-    billStore.billApiType = 'DELETE'
-    billStore.handleBillApi(billStore.billDialog.data)
-  })
-}
-</script>

src/components/Food/Data/FoodRecordData.vue

@@ -12,7 +12,7 @@
           <el-card class="record-card">
             <span class="record-content">完成人：{{ item.person }}</span>
             <el-image v-if="item.imageUrl"
-                      :src="AListUrl + item.imageUrl" fit="cover" alt="暂无图片"
+                      :src="`${item.imageUrl}${ThumbImageQuery}`" fit="cover" alt="暂无图片"
                       @click="viewImageClick(item)" class="record-image"/>
           </el-card>
         </el-timeline-item>
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food.ts'
-import { AListUrl } from '@/utils'
+import { ThumbImageQuery } from '@/utils'
 import { SvgIcon } from 'vue3-common'
 import { IFoodRecord } from '@/types/food.ts'
 import { showImagePreview } from 'vant'
@@ -32,7 +32,6 @@ import { showImagePreview } from 'vant'
 const foodStore = useFoodStore()
 
 const viewImageClick = (item: IFoodRecord) => {
-  const imageList = [AListUrl + item.imageUrl]
+  showImagePreview({ images: [item.imageUrl], closeable: true })
-  showImagePreview({ images: imageList, closeable: true })
 }
 </script>

src/components/Food/Data/FoodStepData.vue

@@ -12,7 +12,7 @@
         <div class="step-body">
           <span class="step-content">{{ item.content }}</span>
           <img v-if="item.imageUrl"
-               :src="serviceFileRootPath + item.imageUrl" alt="暂无图片" class="step-image"/>
+               :src="item.imageUrl" alt="暂无图片" class="step-image"/>
         </div>
       </div>
     </div>
@@ -21,7 +21,6 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food.ts'
-import { serviceFileRootPath } from '@/utils'
 import { SvgIcon } from 'vue3-common'
 
 const foodStore = useFoodStore()

src/components/Food/FoodCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="life-record-card card-item">
     <el-image v-if="props.foodItem?.recordList.length > 0"
-              :src="AListUrl + props.foodItem?.recordList[0].imageUrl"
+              :src="`${props.foodItem?.recordList[0].imageUrl}${ThumbImageQuery}`"
               fit="contain" alt="暂无成果" @click="viewImageClick">
       <template #error>
         <div class="image-slot">
@@ -64,8 +64,8 @@ import { IFoodRecipe } from '@/types/food.ts'
 import { useRouter } from 'vue-router'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { AListUrl } from '@/utils'
 import { showImagePreview } from 'vant'
+import { ThumbImageQuery } from '@/utils'
 
 const router = useRouter()
 const foodStore = useFoodStore()
@@ -87,7 +87,7 @@ onMounted(() => {
 })
 
 const viewImageClick = () => {
-  const imageList = props.foodItem?.recordList.map((item) => `${AListUrl}${item.imageUrl}`)
+  const imageList = props.foodItem?.recordList.map((item) => `${item.imageUrl}`)
   showImagePreview({ images: imageList, closeable: true })
 }
 

src/components/Food/Form/FoodStepDialog.vue

@@ -13,11 +13,25 @@
       </el-form-item>
 
       <el-form-item label="图片">
-        <upload-image v-model="foodStore.currentFoodStep.imageUrl"
+        <el-upload
-                      :service-url="fileServiceUrl"
+            v-model:file-list="imageFileList"
-                      :image-limit="1"
+            list-type="picture-card"
-                      :service-file-root-path="serviceFileRootPath"
+            :accept="acceptImageTypes"
-                      :image-path="foodStore.foodImagePath"/>
+            :limit="1"
+            :before-upload="beforeUpload"
+            :http-request="httpRequest"
+            :on-success="handleSuccess"
+            :on-exceed="handleExceed"
+            :before-remove="beforeRemove"
+            :on-remove="handleRemove"
+        >
+          <el-icon><Plus /></el-icon>
+          <template #tip>
+            <div class="el-upload__tip">
+              请上传小于10M的图片
+            </div>
+          </template>
+        </el-upload>
       </el-form-item>
     </el-form>
 
@@ -31,17 +45,58 @@
 </template>
 
 <script lang="ts" setup>
-import { UploadImage } from 'vue3-common'
 import { useFoodStore } from '@/store/food.ts'
-import { ref, reactive, nextTick } from 'vue'
+import { ref, reactive, nextTick, onMounted } from 'vue'
-import { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
 import { foodStepRules } from '@/utils/element/elRules.ts'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { acceptImageTypes } from '@/utils/file.ts'
+import { Plus } from '@element-plus/icons-vue'
+import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
 
 const rules = reactive<FormRules>(foodStepRules)
 
 const formRef = ref()
 const foodStore = useFoodStore()
+const imageFileList = ref<UploadUserFile[]>([])
+
+onMounted(async () => {
+  initImageFileList()
+})
+
+const initImageFileList = () => {
+  imageFileList.value = []
+  const { imageUrl } = foodStore.currentFoodStep
+  if (imageUrl) {
+    imageFileList.value.push({
+      name: 'image',
+      url: imageUrl
+    })
+  }
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(foodStore.foodImagePath, options)
+}
+
+const handleSuccess = (response: string) => {
+  foodStore.currentFoodStep.imageUrl = response
+}
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1张图片')
+}
+
+const handleRemove: UploadProps['onRemove'] = () => {
+  foodStore.currentFoodStep.imageUrl = ''
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
 
 /**
  * 打开对话框事件

src/components/Food/Form/FoodStepForm.vue

@@ -9,7 +9,7 @@
       <el-table-column prop="content" label="内容" align="center" min-width="20%" />
       <el-table-column prop="imageUrl" label="图片" align="center" min-width="20%">
         <template #default="scope">
-          <el-image v-if="scope.row.imageUrl" :src="serviceFileRootPath + scope.row.imageUrl" />
+          <el-image v-if="scope.row.imageUrl" :src="scope.row.imageUrl" />
         </template>
       </el-table-column>
 
@@ -30,7 +30,6 @@ import { useFoodStore } from '@/store/food.ts'
 import { IFoodStep } from '@/types/food.ts'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { serviceFileRootPath } from '@/utils'
 
 const foodStore = useFoodStore()
 

src/components/Journal/JournalCard.vue

@@ -37,7 +37,7 @@
       <!-- 单媒体内容（图片优先于视频） -->
       <el-image
           v-if="props.item?.imageUrl"
-          :src="AListUrl + props.item?.imageUrl"
+          :src="`${props.item?.imageUrl}${ThumbImageQuery}`"
           fit="contain" @click="viewImageClick"
           class="media-content"/>
 
@@ -73,7 +73,7 @@ import { formatDate } from 'vue3-common/utils/dateUtil'
 import { useJournalStore } from '@/store/journal.ts'
 import { useAppStore } from '@/store/app.ts'
 import { useRouter } from 'vue-router'
-import { AListUrl } from '@/utils'
+import { AListUrl, ThumbImageQuery } from '@/utils'
 import { showImagePreview } from 'vant'
 
 const props = defineProps({
@@ -107,8 +107,7 @@ const showToggle = computed(() => overflowLines.value > 0)
 const toggleExpand = () => expanded.value = !expanded.value
 
 const viewImageClick = () => {
-  const imageList = [AListUrl + props.item?.imageUrl]
+  showImagePreview({ images: [props.item?.imageUrl], closeable: true })
-  showImagePreview({ images: imageList, closeable: true })
 }
 
 const editClick = async () => {

src/components/Product/ProductCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="life-record-card card-item">
-    <el-image :src="AListUrl + props.productItem?.imageUrl"
+    <el-image :src="`${props.productItem?.imageUrl}${ThumbImageQuery}`"
               fit="contain" alt="暂无成果" @click="viewImageClick">
       <template #error>
         <div class="image-slot">
@@ -65,7 +65,7 @@ import { defineProps, PropType } from 'vue'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { IProduct } from '@/types/product.ts'
 import { useRouter } from 'vue-router'
-import { AListUrl } from '@/utils'
+import { AListUrl, ThumbImageQuery } from '@/utils'
 import { showImagePreview } from 'vant'
 
 const productStore = useProductStore()
@@ -79,8 +79,7 @@ const props = defineProps({
 })
 
 const viewImageClick = () => {
-  const imageList = [AListUrl + props.productItem?.imageUrl]
+  showImagePreview({ images: [props.productItem?.imageUrl], closeable: true })
-  showImagePreview({ images: imageList, closeable: true })
 }
 
 const editClick = async () => {

src/components/Travel/Data/TravelRecordData.vue

@@ -12,8 +12,7 @@
           <el-card class="record-card">
             <span class="record-content">旅行人：{{ item.persons.join('-') }}</span>
             <el-image v-for="(image, index) in item.imageList" :key="index"
-                      :src="AListUrl + image"
+                      :src="`${image}?q=70`" fit="cover" alt="暂无图片" class="record-image"
-                      fit="cover" alt="暂无图片" class="record-image"
                       @click="viewImageClick(item, index)"/>
 
             <video v-for="(video, index) in item.videoList"
@@ -39,7 +38,6 @@ import { ITravelRecord } from '@/types/travel.ts'
 const travelStore = useTravelStore()
 
 const viewImageClick = (record: ITravelRecord, index: number) => {
-  const imageList = record.imageList.map((item) => `${AListUrl}${item}`)
+  showImagePreview({ images: record.imageList, closeable: true, startPosition: index })
-  showImagePreview({ images: imageList, closeable: true, startPosition: index })
 }
 </script>

src/components/Travel/Form/TravelRecordDialog.vue

@@ -1,106 +0,0 @@
-<template>
-  <el-dialog v-model="dialogData.visible" :title="dialogData.title"
-             center @open="openDialogEvent" class="travel-record-dialog">
-    <el-form ref="formRef" :model="dialogData.data"
-             :rules="rules" label-width="80">
-      <el-form-item label="景点名称" prop="name">
-        <el-select
-            v-model="travelStore.travelRecordDialog.data.name"
-            @focus="travelStore.queryTravelSpotNameList()"
-            :disabled="travelStore.travelRecordApiType === 'UPDATE'"
-            placeholder="请选择景点名称">
-          <el-option
-              v-for="(item, index) in travelStore.travelSpotNameList"
-              :key="index" :label="item" :value="item"
-          />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="旅行日期" prop="date">
-        <el-date-picker
-            v-model="dialogData.data.date"
-            type="date" placeholder="请选择日期"
-            value-format="YYYY-MM-DD"/>
-      </el-form-item>
-
-      <el-form-item label="旅行人员" prop="persons">
-        <multi-input :data="dialogData.data.persons"
-                     :size="5"/>
-      </el-form-item>
-
-      <el-form-item label="图片">
-        <upload-image v-model="dialogData.data.imageList"
-                      :service-url="fileServiceUrl"
-                      :image-limit="3"
-                      :service-file-root-path="serviceFileRootPath"
-                      :image-path="travelStore.travelImagePath"/>
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="cancelClick">取消</el-button>
-        <el-button type="primary" @click="confirmClick">保存</el-button>
-        <el-button v-if="travelStore.travelRecordApiType === 'UPDATE'"
-                   type="danger" @click="deleteClick">删除</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { UploadImage } from 'vue3-common'
-import { useTravelStore } from '@/store/travel.ts'
-import { ref, reactive, computed, nextTick } from 'vue'
-import { FormRules } from 'element-plus'
-import { travelRecordRules } from '@/utils/element/elRules.ts'
-import { MultiInput } from 'vue3-common'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-
-const rules = reactive<FormRules>(travelRecordRules)
-
-const formRef = ref()
-const travelStore = useTravelStore()
-
-const dialogData = computed(() => travelStore.travelRecordDialog)
-
-/**
- * 打开对话框事件
- */
-const openDialogEvent = async () => {
-  await nextTick(() => {
-    formRef.value?.clearValidate()
-  })
-}
-
-/**
- * 点击确认按钮
- */
-const confirmClick = () => {
-  formRef.value.validate().then(() => {
-    travelStore.handleTravelRecordApi(dialogData.value.data)
-  })
-}
-
-const cancelClick = () => {
-  dialogData.value.visible = false
-}
-
-const deleteClick = () => {
-  commonElMessageBox('是否确认删除该记录?').then(() => {
-    travelStore.travelRecordApiType = 'DELETE'
-    travelStore.handleTravelRecordApi(dialogData.value.data)
-  })
-}
-</script>
-
-<style lang="scss">
-.travel-record-dialog {
-  width: 40%;
-
-  .el-dialog__body {
-    height: 45vh;
-  }
-}
-</style>

src/components/Travel/TravelCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="life-record-card card-item">
     <el-image v-if="props.travelItem?.recordList.length > 0"
-              :src="AListUrl + props.travelItem?.recordList[0].imageList[0]"
+              :src="`${props.travelItem?.recordList[0].imageList[0]}${ThumbImageQuery}`"
               fit="contain" alt="暂无成果" @click="viewImageClick">
       <template #error>
         <div class="image-slot">
@@ -65,9 +65,9 @@ import { useRouter } from 'vue-router'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { ITravelSpot } from '@/types/travel.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { AListUrl } from '@/utils'
 import { parsePerson } from '@/utils/home/travelUtil.ts'
 import { showImagePreview } from 'vant'
+import { ThumbImageQuery } from '@/utils'
 
 const router = useRouter()
 const travelStore = useTravelStore()
@@ -85,7 +85,9 @@ const props = defineProps({
 })
 
 const viewImageClick = () => {
-  const imageList = props.travelItem.recordList.flatMap((record) => record.imageList.map((item) => `${AListUrl}${item}`))
+  const imageList = props.travelItem.recordList.flatMap((record) => {
+    return record.imageList.map((item) => item)
+  })
   showImagePreview({ images: imageList, closeable: true })
 }
 
@@ -109,10 +111,6 @@ const deleteClick = () => {
     travelStore.handleTravelSpotApi(props.travelItem)
   })
 }
-
-const changeTravelEvent = (current: number) => {
-  cardInfo.currentIndex = current
-}
 </script>
 
 <style lang="scss">

src/utils/element/elUpload.ts

@@ -44,7 +44,7 @@ export const beforeUploadVideo = (rawFile: UploadRawFile): boolean => {
 }
 
 export const httpRequestFile = async (basePath: string,
-  options: UploadRequestOptions, isCompress = true) => {
+  options: UploadRequestOptions, isCompress = false) => {
   const loading = ElLoading.service({
     lock: true,
     text: '文件上传中 请等待',
@@ -52,7 +52,9 @@ export const httpRequestFile = async (basePath: string,
   })
 
   try {
-    const filePath = `${AListPath}/${basePath}/${getFileHashName(options.file)}.${getFileExtension(options.file.name)}`
+    const fileName = `${getFileHashName(options.file)}.${getFileExtension(options.file.name)}`
+    const filePath = `${AListPath}/${basePath}/${fileName}`
+    const imageUrl = `/image-api/${basePath}/${fileName}`
     const data = new FormData()
 
     if (isCompress) {
@@ -63,9 +65,9 @@ export const httpRequestFile = async (basePath: string,
     }
     data.append('filePath', filePath)
 
-    const result = await uploadAListFileApi(data)
+    await uploadAListFileApi(data)
     ElMessage.success('上传成功')
-    return result
+    return imageUrl
   } catch (error) {
     console.log(error)
     ElMessage.error('上传失败 请联系管理员')

src/utils/index.ts

@@ -18,20 +18,12 @@ export const setActiveClass = (parentClassName: string, elementTag: string,
   currentElement.setAttribute('class', activeClassName)
 }
 
-/**
- * 文件服务器地址
- */
-export const fileServiceUrl = '/home-api/file'
-
-/**
- * 服务器文件路径根地址
- */
-export const serviceFileRootPath = '/home-api/'
-
 export const AListUrl = '/alist-api/'
 
 export const AListPath = import.meta.env.VITE_API_ALIST_PATH
 
+export const ThumbImageQuery = '?q=70'
+
 /**
  * 获取assets静态资源
  * @param url 路径

src/views/bill/detail[id].vue

@@ -89,10 +89,25 @@
       </el-form-item>
 
       <el-form-item label="账单图片">
-        <upload-image v-model="billStore.currentBillRecord.imageList"
+        <el-upload
-                      :service-url="fileServiceUrl"
+            v-model:file-list="imageFileList"
-                      :service-file-root-path="serviceFileRootPath"
+            list-type="picture-card"
-                      :image-path="billStore.billImagePath"/>
+            :accept="acceptImageTypes"
+            :limit="3"
+            :before-upload="beforeUpload"
+            :http-request="httpRequest"
+            :on-success="handleSuccess"
+            :on-exceed="handleExceed"
+            :before-remove="beforeRemove"
+            :on-remove="handleRemove"
+        >
+          <el-icon><Plus /></el-icon>
+          <template #tip>
+            <div class="el-upload__tip">
+              请上传小于10M的图片
+            </div>
+          </template>
+        </el-upload>
       </el-form-item>
     </el-form>
 
@@ -106,21 +121,31 @@
 </template>
 
 <script lang="ts" setup>
-import { UploadImage, AmountInput } from 'vue3-common'
+import { AmountInput } from 'vue3-common'
 import { useBillStore } from '@/store/bill.ts'
 import { useAppStore } from '@/store/app.ts'
-import { Location, Document } from '@element-plus/icons-vue'
+import { Location, Document, Plus } from '@element-plus/icons-vue'
-import { FormRules } from 'element-plus'
+import {
+  ElMessage,
+  ElMessageBox,
+  FormRules,
+  UploadProps,
+  UploadRawFile,
+  UploadRequestOptions,
+  UploadUserFile
+} from 'element-plus'
 import { billRecordRules } from '@/utils/element/elRules.ts'
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { IBillCategory } from '@/types/bill.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { acceptImageTypes } from '@/utils/file.ts'
+import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
 
 const formRef = ref()
 const rules = reactive<FormRules>(billRecordRules)
 const billStore = useBillStore()
 const appStore = useAppStore()
+const imageFileList = ref<UploadUserFile[]>([])
 
 const billInfo = reactive({
   billTypeList: [] as string[],
@@ -131,6 +156,7 @@ onMounted(async () => {
   appStore.isShowMobileBack = true
 
   await initBillRecord()
+  initImageFileList()
 })
 
 const initBillRecord = async () => {
@@ -157,6 +183,41 @@ const initBillRecord = async () => {
   })
 }
 
+const initImageFileList = () => {
+  imageFileList.value = []
+  billStore.currentBillRecord.imageList.forEach((image) => {
+    imageFileList.value.push({
+      name: 'image',
+      url: image
+    })
+  })
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(billStore.billImagePath, options)
+}
+
+const handleSuccess = (response: string) => {
+  billStore.currentBillRecord.imageList.push(response)
+}
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传3张图片')
+}
+
+const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
+  const index = imageFileList.value.findIndex((item) => item.uid === uploadFile.uid)
+  billStore.currentBillRecord.imageList.splice(index, 1)
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
+
 /**
  * 获取账单类型名称
  * @param type 账单类型

src/views/food/recordForm.vue

@@ -72,7 +72,6 @@ import { ref, reactive, onMounted } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
 import { foodRecordRules } from '@/utils/element/elRules.ts'
-import { AListUrl } from '@/utils'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { useAppStore } from '@/store/app.ts'
 import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
@@ -98,7 +97,7 @@ const initImageFileList = () => {
   if (imageUrl) {
     imageFileList.value.push({
       name: 'image',
-      url: `${AListUrl}${imageUrl}`
+      url: imageUrl
     })
   }
 }
@@ -112,7 +111,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
 }
 
 const handleSuccess = (response: string) => {
-  foodStore.currentFoodRecord.imageUrl = `p${response}`
+  foodStore.currentFoodRecord.imageUrl = response
 }
 
 const handleExceed: UploadProps['onExceed'] = () => {

src/views/food/timeline.vue

@@ -24,7 +24,7 @@
                         placement="top">
         <div class="timeline-info card-item">
           <span class="name">{{ item.name }}</span>
-          <el-image :src="AListUrl + item.imageUrl"
+          <el-image :src="`${item.imageUrl}${ThumbImageQuery}`"
                     fit="cover" alt="暂无成果"
                     @click="viewImageClick(item)">
             <template #error>
@@ -45,7 +45,7 @@
 import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
 import { useFoodStore } from '@/store/food.ts'
 import { formatDate, getLastDate, getNextDate } from 'vue3-common/utils/dateUtil'
-import { AListUrl } from '@/utils'
+import { ThumbImageQuery } from '@/utils'
 import { onMounted } from 'vue'
 import { showImagePreview } from 'vant'
 import { IFoodRecord } from '@/types/food.ts'
@@ -58,8 +58,7 @@ onMounted(async () => {
 })
 
 const viewImageClick = (item: IFoodRecord) => {
-  const imageList = [AListUrl + item.imageUrl]
+  showImagePreview({ images: [item.imageUrl], closeable: true })
-  showImagePreview({ images: imageList, closeable: true })
 }
 
 const changeDateEvent = async (value: Date) => {

src/views/journal/detail[id].vue

@@ -157,7 +157,7 @@ const initFileList = () => {
   if (imageUrl) {
     imageFileList.value.push({
       name: 'image',
-      url: `${AListUrl}${imageUrl}`
+      url: imageUrl
     })
   }
 
@@ -178,7 +178,7 @@ const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadReque
 }
 
 const handleImageSuccess = (response: string) => {
-  journalStore.currentJournal.imageUrl = `p${response}`
+  journalStore.currentJournal.imageUrl = response
 }
 
 const handleImageExceed: UploadProps['onExceed'] = () => {

src/views/ledger/detail[id].vue

@@ -118,7 +118,7 @@ const initImageFileList = () => {
   if (imageUrl) {
     imageFileList.value.push({
       name: 'image',
-      url: `${AListUrl}${imageUrl}`
+      url: imageUrl
     })
   }
 }
@@ -132,7 +132,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
 }
 
 const handleSuccess = (response: string) => {
-  ledgerStore.currentLedgerRecord.imageUrl = `p${response}`
+  ledgerStore.currentLedgerRecord.imageUrl = response
 }
 
 const handleExceed: UploadProps['onExceed'] = () => {

src/views/product/detail[id].vue

@@ -97,7 +97,6 @@ import { useAppStore } from '@/store/app.ts'
 import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
 import { productRules } from '@/utils/element/elRules.ts'
 import { onMounted, reactive, ref } from 'vue'
-import { AListUrl } from '@/utils'
 import { acceptImageTypes } from '@/utils/file.ts'
 import { Plus } from '@element-plus/icons-vue'
 import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
@@ -115,6 +114,17 @@ onMounted(async () => {
   initImageFileList()
 })
 
+const initImageFileList = () => {
+  imageFileList.value = []
+  const { imageUrl } = productStore.currentProduct
+  if (imageUrl) {
+    imageFileList.value.push({
+      name: 'image',
+      url: imageUrl
+    })
+  }
+}
+
 const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
   return beforeUploadImage(rawFile)
 }
@@ -124,7 +134,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
 }
 
 const handleSuccess = (response: string) => {
-  productStore.currentProduct.imageUrl = `p${response}`
+  productStore.currentProduct.imageUrl = response
 }
 
 const handleExceed: UploadProps['onExceed'] = () => {
@@ -139,17 +149,6 @@ const beforeRemove: UploadProps['beforeRemove'] = () => {
   return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
 }
 
-const initImageFileList = () => {
-  imageFileList.value = []
-  const { imageUrl } = productStore.currentProduct
-  if (imageUrl) {
-    imageFileList.value.push({
-      name: 'image',
-      url: `${AListUrl}${imageUrl}`
-    })
-  }
-}
-
 /**
  * 点击确认按钮
  */

src/views/profile/index.vue

@@ -3,7 +3,7 @@
     <div class="profile-card">
       <div class="avatar-wrapper">
         <el-avatar
-            :src="serviceFileRootPath + userStore.userInfo.avatar"
+            :src="userStore.userInfo.avatar"
             alt="用户头像" :size="80"
         />
 
@@ -102,7 +102,6 @@ import { useUserStore } from '@/store/user.ts'
 import { useAppStore } from '@/store/app.ts'
 import { useRouter } from 'vue-router'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { serviceFileRootPath } from '@/utils'
 
 const userStore = useUserStore()
 const appStore = useAppStore()
@@ -114,12 +113,12 @@ onMounted(() => {
 
 const infoClick = () => {
   appStore.isShowMobileBack = true
-  router.push('/home-home/profile/info')
+  router.push('/profile/info')
 }
 
 const passwordClick = () => {
   // appStore.isShowMobileBack = true
-  // router.push('/home-home/profile/password')
+  // router.push('/profile/password')
 }
 
 const refreshClick = async () => {

src/views/profile/info.vue

@@ -10,11 +10,25 @@
       </el-form-item>
 
       <el-form-item label="头像">
-        <upload-image v-model="userStore.userInfo.avatar"
+        <el-upload
-                      :image-limit="1"
+            v-model:file-list="imageFileList"
-                      :service-url="fileServiceUrl"
+            list-type="picture-card"
-                      :service-file-root-path="serviceFileRootPath"
+            :accept="acceptImageTypes"
-                      :image-path="userStore.userImagePath"/>
+            :limit="1"
+            :before-upload="beforeUpload"
+            :http-request="httpRequest"
+            :on-success="handleSuccess"
+            :on-exceed="handleExceed"
+            :before-remove="beforeRemove"
+            :on-remove="handleRemove"
+        >
+          <el-icon><Plus /></el-icon>
+          <template #tip>
+            <div class="el-upload__tip">
+              请上传小于10M的图片
+            </div>
+          </template>
+        </el-upload>
       </el-form-item>
 
       <el-form-item label="性别">
@@ -80,17 +94,66 @@
 </template>
 
 <script setup lang="ts">
-import { UploadImage } from 'vue3-common'
 import { pcTextArr } from 'element-china-area-data'
 import { useUserStore } from '@/store/user.ts'
-import { reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import {
+  ElMessage,
+  ElMessageBox,
+  FormInstance,
+  FormRules,
+  UploadProps,
+  UploadRawFile,
+  UploadRequestOptions, UploadUserFile
+} from 'element-plus'
 import { profileInfoRules } from '@/utils/element/elRules.ts'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { acceptImageTypes } from '@/utils/file.ts'
+import { Plus } from '@element-plus/icons-vue'
+import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
 
 const userStore = useUserStore()
 const ruleFormRef = ref<FormInstance>()
 const rules = reactive<FormRules>(profileInfoRules)
+const imageFileList = ref<UploadUserFile[]>([])
+
+onMounted(async () => {
+  initImageFileList()
+})
+
+const initImageFileList = () => {
+  imageFileList.value = []
+  const { avatar } = userStore.userInfo
+  if (avatar) {
+    imageFileList.value.push({
+      name: 'image',
+      url: avatar
+    })
+  }
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(userStore.userImagePath, options)
+}
+
+const handleSuccess = (response: string) => {
+  userStore.userInfo.avatar = response
+}
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1张图片')
+}
+
+const handleRemove: UploadProps['onRemove'] = () => {
+  userStore.userInfo.avatar = ''
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
 
 const cancelClick = () => {
   history.back()
@@ -98,7 +161,7 @@ const cancelClick = () => {
 
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
-  await formEl.validate(async (valid, fields) => {
+  await formEl.validate(async (valid) => {
     if (valid) {
       await userStore.updateUser()
       await userStore.queryUser()

src/views/travel/recordForm.vue

@@ -29,29 +29,26 @@
       </el-form-item>
 
       <el-form-item label="图片">
-        <upload-image v-model="travelStore.currentTravelRecord.imageList"
+        <el-upload
-                      :service-url="fileServiceUrl"
+            v-model:file-list="imageFileList"
-                      :image-limit="3"
+            list-type="picture-card"
-                      :service-file-root-path="serviceFileRootPath"
+            :accept="acceptImageTypes"
-                      :image-path="travelStore.travelImagePath"/>
+            :limit="3"
+            :before-upload="beforeUpload"
+            :http-request="httpRequest"
+            :on-success="handleSuccess"
+            :on-exceed="handleExceed"
+            :before-remove="beforeRemove"
+            :on-remove="handleRemove"
+        >
+          <el-icon><Plus /></el-icon>
+          <template #tip>
+            <div class="el-upload__tip">
+              请上传小于10M的图片
+            </div>
+          </template>
+        </el-upload>
       </el-form-item>
-
-      <el-form-item label="视频">
-        <upload-video v-model="travelStore.currentTravelRecord.videoList"
-                      :service-url="fileServiceUrl"
-                      :image-limit="3"
-                      :service-file-root-path="serviceFileRootPath"
-                      :video-path="travelStore.travelVideoPath"
-                      style="width: 100%;"/>
-      </el-form-item>
-
-      <div class="video-list">
-        <video v-for="(item, index) in travelStore.currentTravelRecord.videoList"
-               :key="index" controls style="width: 60%; min-height: 200px;">
-          <source :src="serviceFileRootPath + item" type="video/mp4">
-          您的浏览器不支持 HTML5 视频
-        </video>
-      </div>
     </el-form>
 
     <div class="button-container">
@@ -63,14 +60,15 @@
 </template>
 
 <script lang="ts" setup>
-import { UploadImage, UploadVideo } from 'vue3-common'
 import { useTravelStore } from '@/store/travel.ts'
 import { ref, reactive, onMounted } from 'vue'
-import { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
 import { travelRecordRules } from '@/utils/element/elRules.ts'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { useAppStore } from '@/store/app.ts'
+import { acceptImageTypes } from '@/utils/file.ts'
+import { Plus } from '@element-plus/icons-vue'
+import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
 
 const rules = reactive<FormRules>(travelRecordRules)
 
@@ -78,10 +76,49 @@ const formRef = ref()
 const travelStore = useTravelStore()
 const appStore = useAppStore()
 
+const imageFileList = ref<UploadUserFile[]>([])
+
 onMounted(async () => {
   appStore.isShowMobileBack = true
+
+  initImageFileList()
 })
 
+const initImageFileList = () => {
+  imageFileList.value = []
+  travelStore.currentTravelRecord.imageList.forEach((image) => {
+    imageFileList.value.push({
+      name: 'image',
+      url: image
+    })
+  })
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(travelStore.travelImagePath, options)
+}
+
+const handleSuccess = (response: string) => {
+  travelStore.currentTravelRecord.imageList.push(response)
+}
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传3张图片')
+}
+
+const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
+  const index = imageFileList.value.findIndex((item) => item.uid === uploadFile.uid)
+  travelStore.currentTravelRecord.imageList.splice(index, 1)
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
+
 /**
  * 点击确认按钮
  */

vite.config.ts

@@ -5,7 +5,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { viteMockServe } from 'vite-plugin-mock'
 
 // const API_HOST = '14.103.235.151'
-const API_HOST = '192.168.1.7'
+const API_HOST = '100.66.1.3'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -51,9 +51,14 @@ export default defineConfig({
         rewrite: (item) => item.replace(/^\/blog-api/, '')
       },
       '/alist-api': {
-        target: 'http://192.168.1.7:5244',
+        target: 'http://100.66.1.3:5244',
         changeOrigin: true,
         rewrite: (item) => item.replace(/^\/alist-api/, '')
+      },
+      '/image-api': {
+        target: 'http://100.66.1.3:3000',
+        changeOrigin: true,
+        rewrite: (item) => item.replace(/^\/image-api/, '')
       }
     }
   }