feat: 针对不同场景，配置2个不同的上传图片函数

.eslintrc-auto-import.json

@@ -88,6 +88,7 @@
     "watchPostEffect": true,
     "watchSyncEffect": true,
     "useRequest": true,
-    "useUpload": true
+    "useUpload": true,
+    "useUpload2": true
   }
 }

env/.env

@@ -10,3 +10,5 @@ VITE_WX_APPID = 'wxa2abb91f64032a2b'
 # 非h5端只能使用完整的baseurl，否则无法请求，本地proxy只支持h5端
 # VITE_SERVER_BASEURL = '/api'
 VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run'
+
+VITE_UPLOAD_BASEURL = 'https://ukw0y1.laf.run/upload'

src/env.d.ts

@@ -9,9 +9,15 @@ declare module '*.vue' {
 }
 
 interface ImportMetaEnv {
+  /** 网站标题，应用名称 */
   readonly VITE_APP_TITLE: string
+  /** 服务端口号 */
   readonly VITE_SERVER_PORT: string
+  /** 后台接口地址 */
   readonly VITE_SERVER_BASEURL: string
+  /** 上传图片地址 */
+  readonly VITE_UPLOAD_BASEURL: string
+  /** 是否清除console */
   readonly VITE_DELETE_CONSOLE: string
   // 更多环境变量...
 }

src/hooks/useUpload.ts

@@ -1,14 +1,13 @@
 /**
  * useUpload 是一个定制化的请求钩子，用于处理异步请求和响应。
- * @param url 上传图片的后台地址，如 https://ukw0y1.laf.run/upload。
  * @param formData 额外传递给后台的数据，如{name: '菲鸽'}。
  * @returns 返回一个对象{loading, error, data, run}，包含请求的加载状态、错误信息、响应数据和手动触发请求的函数。
  */
-export default function useUpload<T>(url: string, formData: Record<string, any> = {}) {
+export default function useUpload<T>(formData: Record<string, any> = {}) {
   const loading = ref(false)
   const error = ref(false)
   const data = ref<T>()
-
+  const url = import.meta.env.VITE_UPLOAD_BASEURL
   const run = () => {
     // #ifdef MP-WEIXIN
     // 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。

src/hooks/useUpload2.ts

@@ -0,0 +1,82 @@
+/**
+ * useUpload 是一个定制化的请求钩子，用于处理异步请求和响应。
+ * @param url 上传图片的后台地址，如 https://ukw0y1.laf.run/upload。
+ * 如果上传地址是固定的，那就可以配置到 .env 里面，函数里面不需要再传了。
+ * @param formData 额外传递给后台的数据，如{name: '菲鸽'}。
+ * @returns 返回一个对象{loading, error, data, run}，包含请求的加载状态、错误信息、响应数据和手动触发请求的函数。
+ */
+export default function useUpload<T>(url: string, formData: Record<string, any> = {}) {
+  const loading = ref(false)
+  const error = ref(false)
+  const data = ref<T>()
+
+  const run = () => {
+    // #ifdef MP-WEIXIN
+    // 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
+    // 微信小程序在2023年10月17日之后，使用本API需要配置隐私协议
+    uni.chooseMedia({
+      count: 1,
+      mediaType: ['image'],
+      success: (res) => {
+        console.log(res)
+        loading.value = true
+        const tempFilePath = res.tempFiles[0].tempFilePath
+        uni.uploadFile({
+          url,
+          filePath: tempFilePath,
+          name: 'file',
+          formData,
+          success: (uploadFileRes) => {
+            console.log(uploadFileRes.data)
+            data.value = uploadFileRes.data as T
+          },
+          fail: (err) => {
+            console.log('uni.uploadFile err->', err)
+            error.value = true
+          },
+          complete: () => {
+            loading.value = false
+          },
+        })
+      },
+      fail: (err) => {
+        console.log('uni.chooseMedia err->', err)
+        error.value = true
+      },
+    })
+    // #endif
+    // #ifndef MP-WEIXIN
+    uni.chooseImage({
+      count: 1,
+      success: (res) => {
+        console.log(res)
+        loading.value = true
+        const tempFilePath = res.tempFilePaths[0]
+        uni.uploadFile({
+          url,
+          filePath: tempFilePath,
+          name: 'file',
+          formData,
+          success: (uploadFileRes) => {
+            console.log(uploadFileRes.data)
+            data.value = uploadFileRes.data as T
+          },
+          fail: (err) => {
+            console.log('uni.uploadFile err->', err)
+            error.value = true
+          },
+          complete: () => {
+            loading.value = false
+          },
+        })
+      },
+      fail: (err) => {
+        console.log('uni.chooseImage err->', err)
+        error.value = true
+      },
+    })
+    // #endif
+  }
+
+  return { loading, error, data, run }
+}

src/pages/index/upload2.vue

@@ -22,7 +22,8 @@
 </template>
 
 <script lang="ts" setup>
-const { loading, data, run } = useUpload<string>('https://ukw0y1.laf.run/upload', { user: '菲鸽' })
+// const { loading, data, run } = useUpload2<string>('https://ukw0y1.laf.run/upload', { user: '菲鸽' })
+const { loading, data, run } = useUpload<string>({ user: '菲鸽' })
 </script>
 
 <style lang="scss" scoped>