feat:更新上传图片组件

nginx.conf

@@ -8,6 +8,8 @@ server {
 
 	server_name _;
 
+    client_max_body_size 500M;
+
     location /sweet-hut/ {
         alias /usr/share/nginx/html/;
         try_files $uri $uri/ /sweet-hut/index.html;

src/apis/file.ts

@@ -18,6 +18,7 @@ export const uploadAListFileApi = (form: FormData): Promise<any> =>
     headers: {
       'Content-Type': 'multipart/form-data'
     },
+    timeout: 0,
     method: 'post',
     data: form
   })

src/components/Food/Data/FoodRecordData.vue

@@ -12,8 +12,8 @@
           <el-card class="record-card">
             <span class="record-content">完成人：{{ item.person }}</span>
             <el-image v-if="item.imageUrl"
-                      :src="serviceFileRootPath + item.imageUrl"
+                      :src="AListPath + item.imageUrl"
-                      :preview-src-list="[serviceFileRootPath + item.imageUrl]"
+                      :preview-src-list="[AListPath + item.imageUrl]"
                       fit="contain" alt="暂无图片" class="record-image"/>
           </el-card>
         </el-timeline-item>
@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food.ts'
-import { serviceFileRootPath } from '@/utils'
+import { AListPath } from '@/utils'
 import { SvgIcon } from 'vue3-common'
 
 const foodStore = useFoodStore()

src/utils/element/elUpload.ts

@@ -0,0 +1,50 @@
+import { ElLoading, ElMessage, UploadRawFile, UploadRequestOptions } from 'element-plus'
+import { getFileExtension, getFileHashName, validateImage } from '@/utils/home/file.ts'
+import { compressImage } from 'vue3-common/utils/fileUtil'
+import { compressOptions } from '@/utils'
+import { uploadAListFileApi } from '@/apis/file.ts'
+
+export const beforeUploadImage = (rawFile: UploadRawFile): boolean => {
+  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
+}
+
+export const httpRequestFile = async (basePath: string, options: UploadRequestOptions) => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '文件上传中 请等待',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+
+  try {
+    const filePath = `/local/${basePath}/${getFileHashName(options.file.name)}.${getFileExtension(options.file.name)}`
+    const compressFile = await compressImage(options.file, compressOptions)
+
+    const data = new FormData()
+    data.append('file', compressFile)
+    data.append('filePath', filePath)
+
+    const result = await uploadAListFileApi(data)
+    ElMessage.success('上传成功')
+    return result
+  } catch (error) {
+    console.log(error)
+    ElMessage.error('上传失败 请联系管理员')
+  } finally {
+    loading.close()
+  }
+}

src/utils/home/file.ts

@@ -8,6 +8,10 @@ export const getFileExtension = (name: string) => {
   return name.substring(name.lastIndexOf('.') + 1).toLowerCase()
 }
 
+export const getFilePath = (basePath: string, name: string) => {
+  return `/local/${basePath}/${getFileHashName(name)}.${getFileExtension(name)}`
+}
+
 export const validateExcel = (fileType: string, fileExtension: string): boolean => {
   // 常见的 Excel MIME 类型
   const excelMimeTypes = [
@@ -23,6 +27,8 @@ export const validateExcel = (fileType: string, fileExtension: string): boolean
   return excelMimeTypes.includes(fileType) || excelExtensions.includes(fileExtension.toLowerCase())
 }
 
+export const acceptImageTypes = '.jpg,.jpeg,.png,.gif,.webp,.bmp,.JPG,.JPEG,.PNG,.GIF,.WEBP,.BMP'
+
 export const validateImage = (fileType: string, fileExtension: string): boolean => {
   // 常见的图片 MIME 类型
   const imageMimeTypes = [

src/utils/index.ts

@@ -30,6 +30,12 @@ export const serviceFileRootPath = '/home-api/'
 
 export const AListPath = '/alist-api/'
 
+export const compressOptions = {
+  quality: 0.7,
+  maxHeight: 800,
+  maxWidth: 600
+}
+
 /**
  * 获取assets静态资源
  * @param url 路径

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

@@ -35,9 +35,9 @@ const foodStore = useFoodStore()
 const appStore = useAppStore()
 const route = useRoute()
 
-onMounted(() => {
+onMounted(async () => {
   appStore.isShowMobileBack = true
-  foodStore.queryFoodRecipe(route.params.id as number)
+  await foodStore.queryFoodRecipe(route.params.id as number)
 })
 </script>
 

src/views/food/recipeForm.vue

@@ -68,7 +68,8 @@
 import FoodMaterialDialog from '@/components/Food/Form/FoodMaterialDialog.vue'
 import FoodStepDialog from '@/components/Food/Form/FoodStepDialog.vue'
 import { useFoodStore } from '@/store/food.ts'
-import { ref, reactive } from 'vue'
+import { useAppStore } from '@/store/app.ts'
+import { ref, reactive, onMounted } from 'vue'
 import { FormRules } from 'element-plus'
 import { foodRecordRules } from '@/utils/element/elRules.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
@@ -80,9 +81,14 @@ const rules = reactive<FormRules>(foodRecordRules)
 const formRef = ref()
 const activeStep = ref(0)
 const foodStore = useFoodStore()
+const appStore = useAppStore()
 
 const foodCategoryList = ['家常菜', '淮扬菜', '鲁菜', '川菜', '粤菜', '闽菜', '浙菜', '湘菜', '徽菜', '其他']
 
+onMounted(() => {
+  appStore.isShowMobileBack = true
+})
+
 const previewClick = () => {
   activeStep.value--
 }
@@ -103,6 +109,7 @@ const confirmClick = () => {
 
 const cancelClick = () => {
   history.back()
+  appStore.isShowMobileBack = false
 }
 
 const deleteClick = () => {

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 {
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
-  ElLoading,
-  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 { useAppStore } from '@/store/app.ts'
-import { uploadAListFileApi } from '@/apis/file.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
+  return beforeUploadImage(rawFile)
-  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
 }
 
 const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
-  const loading = ElLoading.service({
+  await httpRequestFile(foodStore.foodImagePath, options)
-    lock: true,
-    text: '文件上传中 请等待',
-    background: 'rgba(0, 0, 0, 0.7)'
-  })
-
-  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 = () => {