feat:增加图片存储模式

src/views/travel/recordForm.vue

@@ -29,29 +29,26 @@
       </el-form-item>
 
       <el-form-item label="图片">
-        <upload-image v-model="travelStore.currentTravelRecord.imageList"
-                      :service-url="fileServiceUrl"
-                      :image-limit="3"
-                      :service-file-root-path="serviceFileRootPath"
-                      :image-path="travelStore.travelImagePath"/>
+        <el-upload
+            v-model:file-list="imageFileList"
+            list-type="picture-card"
+            :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-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)
+}
+
 /**
  * 点击确认按钮
  */