From 6a6030642e8253cc11b079de33fb8e0831f9ea0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=B2=E9=B8=BD?= <1020103647@qq.com>
Date: Fri, 3 May 2024 14:26:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=92=88=E5=AF=B9=E4=B8=8D=E5=90=8C?=
 =?UTF-8?q?=E5=9C=BA=E6=99=AF=EF=BC=8C=E9=85=8D=E7=BD=AE2=E4=B8=AA?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E7=9A=84=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc-auto-import.json  |  3 +-
 env/.env                    |  2 +
 src/env.d.ts                |  6 +++
 src/hooks/useUpload.ts      |  5 +--
 src/hooks/useUpload2.ts     | 82 +++++++++++++++++++++++++++++++++++++
 src/pages/index/upload2.vue |  3 +-
 6 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useUpload2.ts

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 587c0ba..de203b7 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -88,6 +88,7 @@
     "watchPostEffect": true,
     "watchSyncEffect": true,
     "useRequest": true,
-    "useUpload": true
+    "useUpload": true,
+    "useUpload2": true
   }
 }
diff --git a/env/.env b/env/.env
index c71934d..8f89c8f 100644
--- a/env/.env
+++ b/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'
diff --git a/src/env.d.ts b/src/env.d.ts
index fa8c7d8..f19eda8 100644
--- a/src/env.d.ts
+++ b/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
   // 更多环境变量...
 }
diff --git a/src/hooks/useUpload.ts b/src/hooks/useUpload.ts
index 8040f40..466b3d8 100644
--- a/src/hooks/useUpload.ts
+++ b/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 代替。
diff --git a/src/hooks/useUpload2.ts b/src/hooks/useUpload2.ts
new file mode 100644
index 0000000..6d87c65
--- /dev/null
+++ b/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 }
+}
diff --git a/src/pages/index/upload2.vue b/src/pages/index/upload2.vue
index 01df819..c9e576e 100644
--- a/src/pages/index/upload2.vue
+++ b/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>