feat:更新上传图片组件

src/views/food/recordForm.vue

@@ -38,10 +38,11 @@
         <el-upload
             v-model:file-list="imageFileList"
             list-type="picture-card"
-            :on-preview="handlePreview"
+            :accept="acceptImageTypes"
             :limit="1"
             :before-upload="beforeUpload"
             :http-request="httpRequest"
+            :on-success="handleSuccess"
             :on-exceed="handleExceed"
             :before-remove="beforeRemove"
             :on-remove="handleRemove"
@@ -61,10 +62,6 @@
       <el-button type="danger" @click="deleteClick">删除</el-button>
       <el-button type="info" @click="cancelClick">取消</el-button>
     </div>
-
-    <el-dialog v-model="dialogVisible">
-      <el-image :src="dialogImageUrl" alt="Preview Image" />
-    </el-dialog>
   </div>
 </template>
 
@@ -72,33 +69,30 @@
 import { useFoodStore } from '@/store/food.ts'
 import { ref, reactive, onMounted } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
-import {
-  ElLoading,
-  ElMessage, ElMessageBox,
-  FormRules,
-  UploadProps,
-  UploadRawFile,
-  UploadRequestOptions,
-  UploadUserFile
-} from 'element-plus'
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
 import { foodRecordRules } from '@/utils/element/elRules.ts'
 import { AListPath } from '@/utils'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { getFileExtension, getFileHashName, validateImage } from '@/utils/home/file.ts'
-import { uploadAListFileApi } from '@/apis/file.ts'
+import { useAppStore } from '@/store/app.ts'
+import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
+import { acceptImageTypes } from '@/utils/home/file.ts'
 
 const rules = reactive<FormRules>(foodRecordRules)
 
 const formRef = ref()
 const foodStore = useFoodStore()
+const appStore = useAppStore()
 
 const imageFileList = ref<UploadUserFile[]>([])
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
 
-onMounted(async () => {
+onMounted(() => {
+  appStore.isShowMobileBack = true
+
+  initImageFileList()
+})
+
+const initImageFileList = () => {
   imageFileList.value = []
-
   const { imageUrl } = foodStore.currentFoodRecord
   if (imageUrl) {
     imageFileList.value.push({
@@ -106,65 +100,28 @@ onMounted(async () => {
       url: `${AListPath}${imageUrl}`
     })
   }
-})
+}
 
 const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
-  const maxFileMax = 1024 * 1024 * 10
-  const fileType = rawFile.type
-  const fileName = rawFile.name
-  const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
-
-  if (!validateImage(fileType, fileExtension)) {
-    ElMessage.error('请上传图片')
-    return false
-  }
-
-  if (rawFile.size > maxFileMax) {
-    ElMessage.error('请上传10M以内的文件!')
-    return false
-  }
-
-  return true
+  return beforeUploadImage(rawFile)
 }
 
 const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
-  const loading = ElLoading.service({
-    lock: true,
-    text: '文件上传中 请等待',
-    background: 'rgba(0, 0, 0, 0.7)'
-  })
+  await httpRequestFile(foodStore.foodImagePath, options)
+}
 
-  try {
-    const filePath = `/local/food/${getFileHashName(options.file.name)}.${getFileExtension(options.file.name)}`
-
-    const data = new FormData()
-    data.append('file', options.file)
-    data.append('filePath', filePath)
-
-    await uploadAListFileApi(data)
-    foodStore.currentFoodRecord.imageUrl = `p/${filePath}`
-    ElMessage.success('上传成功')
-  } catch (error) {
-    console.log(error)
-    ElMessage.error('上传失败 请联系管理员')
-  } finally {
-    loading.close()
-  }
+const handleSuccess = (response: string) => {
+  foodStore.currentFoodRecord.imageUrl = `p/${response}`
 }
 
 const handleExceed: UploadProps['onExceed'] = () => {
   ElMessage.warning('最多上传1张图片')
 }
 
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+const handleRemove: UploadProps['onRemove'] = () => {
   foodStore.currentFoodRecord.imageUrl = ''
 }
 
-const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
-  dialogImageUrl.value = uploadFile.url!
-  dialogVisible.value = true
-}
-
 const beforeRemove: UploadProps['beforeRemove'] = () => {
   return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
 }
@@ -181,6 +138,7 @@ const confirmClick = () => {
 
 const cancelClick = () => {
   history.back()
+  appStore.isShowMobileBack = false
 }
 
 const deleteClick = () => {