From ae24b9d598012b50c55846180fe90763ebeecc1c 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:13:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0+=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc-auto-import.json  |  3 +-
 src/hooks/useUpload.ts      | 81 +++++++++++++++++++++++++++++++++++++
 src/pages.json              |  8 ++++
 src/pages/index/about.vue   |  1 +
 src/pages/index/upload2.vue | 30 ++++++++++++++
 5 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useUpload.ts
 create mode 100644 src/pages/index/upload2.vue

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 9988edd..587c0ba 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -87,6 +87,7 @@
     "watchEffect": true,
     "watchPostEffect": true,
     "watchSyncEffect": true,
-    "useRequest": true
+    "useRequest": true,
+    "useUpload": true
   }
 }
diff --git a/src/hooks/useUpload.ts b/src/hooks/useUpload.ts
new file mode 100644
index 0000000..8040f40
--- /dev/null
+++ b/src/hooks/useUpload.ts
@@ -0,0 +1,81 @@
+/**
+ * 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> = {}) {
+  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.json b/src/pages.json
index 0e60ea8..cbcd14c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -75,6 +75,14 @@
       "style": {
         "navigationBarTitleText": "上传"
       }
+    },
+    {
+      "path": "pages/index/upload2",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "上传"
+      }
     }
   ],
   "subPackages": []
diff --git a/src/pages/index/about.vue b/src/pages/index/about.vue
index fc6c291..7d6a8bb 100644
--- a/src/pages/index/about.vue
+++ b/src/pages/index/about.vue
@@ -24,6 +24,7 @@
     </view>
     <view class="text-center mt-8 text-#fff">
       <wd-button type="primary" @click="gotoPage('upload')">上传demo</wd-button>
+      <wd-button type="primary" @click="gotoPage('upload2')">上传demo2(请求状态一体化)</wd-button>
     </view>
   </view>
 </template>
diff --git a/src/pages/index/upload2.vue b/src/pages/index/upload2.vue
new file mode 100644
index 0000000..01df819
--- /dev/null
+++ b/src/pages/index/upload2.vue
@@ -0,0 +1,30 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '上传',
+  },
+}
+</route>
+
+<template>
+  <view class="p-4 text-center">
+    <wd-button @click="run">选择图片并上传</wd-button>
+    <view v-if="loading" class="text-blue h-10">上传...</view>
+    <template v-else>
+      <view class="m-2">上传后返回的图片地址：</view>
+      <view class="m-2">{{ data }}</view>
+      <view class="h-80 w-full">
+        <image v-if="data" :src="data" mode="scaleToFill" />
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const { loading, data, run } = useUpload<string>('https://ukw0y1.laf.run/upload', { user: '菲鸽' })
+</script>
+
+<style lang="scss" scoped>
+//
+</style>