feat:更新上传图片和视频组件

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

@@ -36,7 +36,7 @@
         <el-radio-group v-model="journalStore.currentJournal.category"
                         placeholder="请选择分类" clearable>
           <el-radio
-              v-for="(item, index) in categoryTypeList"
+              v-for="(item, index) in journalCategoryTypeList"
               :key="index" :label="item" :value="item"
           />
         </el-radio-group>
@@ -46,7 +46,7 @@
         <el-radio-group v-model="journalStore.currentJournal.weather"
                         placeholder="请选择天气" clearable>
           <el-radio
-              v-for="(item, index) in weatherTypeList"
+              v-for="(item, index) in journalWeatherTypeList"
               :key="index" :value="item.value"
           >
             <template #default>
@@ -60,27 +60,53 @@
         <el-radio-group v-model="journalStore.currentJournal.mood"
                         placeholder="请选择心情" clearable>
           <el-radio
-              v-for="(item, index) in moodTypeList"
+              v-for="(item, index) in journalMoodTypeList"
               :key="index" :value="item" :label="item"
           />
         </el-radio-group>
       </el-form-item>
 
       <el-form-item label="图片">
-        <upload-image v-model="journalStore.currentJournal.imageUrl"
-                      :service-url="fileServiceUrl"
-                      :image-limit="1"
-                      :service-file-root-path="serviceFileRootPath"
-                      :image-path="journalStore.journalImagePath"/>
+        <el-upload
+            v-model:file-list="imageFileList"
+            list-type="picture-card"
+            :accept="acceptImageTypes"
+            :limit="1"
+            :before-upload="beforeImageUpload"
+            :http-request="httpImageRequest"
+            :on-success="handleImageSuccess"
+            :on-exceed="handleImageExceed"
+            :before-remove="beforeRemove"
+            :on-remove="handleImageRemove"
+        >
+          <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="journalStore.currentJournal.videoUrl"
-                      :service-url="fileServiceUrl"
-                      :image-limit="1"
-                      :service-file-root-path="serviceFileRootPath"
-                      :video-path="journalStore.journalVideoPath"
-                      style="width: 100%;"/>
+        <el-upload
+            v-model:file-list="videoFileList"
+            :accept="acceptVideoTypes"
+            :limit="1"
+            :before-upload="beforeVideoUpload"
+            :http-request="httpVideoRequest"
+            :on-success="handleVideoSuccess"
+            :on-exceed="handleVideoExceed"
+            :before-remove="beforeRemove"
+            :on-remove="handleVideoRemove"
+        >
+          <el-button type="primary">点击上传</el-button>
+          <template #tip>
+            <div class="el-upload__tip">
+              请上传小于200M的视频
+            </div>
+          </template>
+        </el-upload>
       </el-form-item>
     </el-form>
 
@@ -95,43 +121,97 @@
 </template>
 
 <script lang="ts" setup>
-import { Location } from '@element-plus/icons-vue'
+import { Location, Plus } from '@element-plus/icons-vue'
 import { useJournalStore } from '@/store/journal.ts'
 import { useAppStore } from '@/store/app.ts'
-import { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
 import { journalRules } from '@/utils/element/elRules.ts'
 import { onMounted, reactive, ref } from 'vue'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
-import { UploadImage, UploadVideo, SvgIcon } from 'vue3-common'
+import { AListUrl } from '@/utils'
+import { SvgIcon } from 'vue3-common'
+import { acceptImageTypes, acceptVideoTypes } from '@/utils/file.ts'
+import { beforeUploadImage, beforeUploadVideo, httpRequestFile } from '@/utils/element/elUpload.ts'
+import { journalCategoryTypeList, journalMoodTypeList, journalWeatherTypeList } from '@/utils/home/journalUtil.ts'
 
 const formRef = ref()
 const rules = reactive<FormRules>(journalRules)
 const journalStore = useJournalStore()
 const appStore = useAppStore()
 
-const categoryTypeList = ['生活', '工作', '其他']
-
-const weatherTypeList = [{
-  value: 'sunny',
-  label: '晴'
-}, {
-  value: 'rainy',
-  label: '雨'
-}, {
-  value: 'snowy',
-  label: '雪'
-}, {
-  value: 'cloudy',
-  label: '阴'
-}]
-
-const moodTypeList = ['😀', '🙁', '😡']
+const imageFileList = ref<UploadUserFile[]>([])
+const videoFileList = ref<UploadUserFile[]>([])
 
 onMounted(async () => {
   appStore.isShowMobileBack = true
+
+  initFileList()
 })
 
+const initFileList = () => {
+  imageFileList.value = []
+  videoFileList.value = []
+
+  const { imageUrl, videoUrl } = journalStore.currentJournal
+  if (imageUrl) {
+    imageFileList.value.push({
+      name: 'image',
+      url: `${AListUrl}${imageUrl}`
+    })
+  }
+
+  if (videoUrl) {
+    videoFileList.value.push({
+      name: 'video',
+      url: `${AListUrl}${videoUrl}`
+    })
+  }
+}
+
+const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(journalStore.journalImagePath, options)
+}
+
+const handleImageSuccess = (response: string) => {
+  journalStore.currentJournal.imageUrl = `p${response}`
+}
+
+const handleImageExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1张图片')
+}
+
+const handleImageRemove: UploadProps['onRemove'] = () => {
+  journalStore.currentJournal.imageUrl = ''
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
+
+const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadVideo(rawFile)
+}
+
+const httpVideoRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(journalStore.journalImagePath, options, false)
+}
+
+const handleVideoSuccess = (response: string) => {
+  journalStore.currentJournal.videoUrl = `p${response}`
+}
+
+const handleVideoExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1个视频')
+}
+
+const handleVideoRemove: UploadProps['onRemove'] = () => {
+  journalStore.currentJournal.videoUrl = ''
+}
+
 /**
  * 点击确认按钮
  */