From b07dc4e3b92c63ef06e0a8f7a88fc65e9feeac80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=B2=E9=B8=BD?= <1020103647@qq.com>
Date: Thu, 2 May 2024 18:22:26 +0800
Subject: [PATCH 1/9] =?UTF-8?q?feat:=20vite-svg-loader=20vite-plugin-svg-i?=
=?UTF-8?q?cons=20=E9=83=BD=E4=B8=8D=E9=9C=80=E8=A6=81=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 2 --
vite.config.ts | 6 ------
2 files changed, 8 deletions(-)
diff --git a/package.json b/package.json
index 8a0b16e..b003b81 100644
--- a/package.json
+++ b/package.json
@@ -150,8 +150,6 @@
"unplugin-auto-import": "^0.17.2",
"vite": "4.3.5",
"vite-plugin-restart": "^0.4.0",
- "vite-plugin-svg-icons": "^2.0.1",
- "vite-svg-loader": "^5.1.0",
"vue-tsc": "^1.8.25"
}
}
diff --git a/vite.config.ts b/vite.config.ts
index bc192e9..e678465 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,8 +13,6 @@ import UniPlatform from '@uni-helper/vite-plugin-uni-platform'
import UniManifest from '@uni-helper/vite-plugin-uni-manifest'
// @see https://unocss.dev/
import UnoCSS from 'unocss/vite'
-// @see https://github.com/jpkleemans/vite-svg-loader
-import svgLoader from 'vite-svg-loader'
import AutoImport from 'unplugin-auto-import/vite'
import { visualizer } from 'rollup-plugin-visualizer'
import ViteRestart from 'vite-plugin-restart'
@@ -58,10 +56,6 @@ export default ({ command, mode }) => {
// UniXXX 需要在 Uni 之前引入
Uni(),
UnoCSS(),
- // svg 可以当做组件来使用(Vite plugin to load SVG files as Vue components, using SVGO for optimization.)
- svgLoader({
- defaultImport: 'url', // or 'raw'
- }),
AutoImport({
imports: ['vue', 'uni-app'],
dts: 'src/types/auto-import.d.ts',
From 1163ce317c44742e52b9d6e8e605bed3d385fbc1 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 13:45:25 +0800
Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0=E5=9B=BE?=
=?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages.json | 8 ++++
src/pages/index/about.vue | 3 ++
src/pages/index/upload.vue | 75 ++++++++++++++++++++++++++++++++++++++
3 files changed, 86 insertions(+)
create mode 100644 src/pages/index/upload.vue
diff --git a/src/pages.json b/src/pages.json
index 018414c..0e60ea8 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -67,6 +67,14 @@
"style": {
"navigationBarTitleText": "请求"
}
+ },
+ {
+ "path": "pages/index/upload",
+ "type": "page",
+ "layout": "default",
+ "style": {
+ "navigationBarTitleText": "上传"
+ }
}
],
"subPackages": []
diff --git a/src/pages/index/about.vue b/src/pages/index/about.vue
index 19a99ec..fc6c291 100644
--- a/src/pages/index/about.vue
+++ b/src/pages/index/about.vue
@@ -22,6 +22,9 @@
去请求页2 (请求状态一体化)
+
+ 上传demo
+
diff --git a/src/pages/index/upload.vue b/src/pages/index/upload.vue
new file mode 100644
index 0000000..2805bd7
--- /dev/null
+++ b/src/pages/index/upload.vue
@@ -0,0 +1,75 @@
+
+{
+ layout: 'default',
+ style: {
+ navigationBarTitleText: '上传',
+ },
+}
+
+
+
+
+ 选择图片并上传
+ 上传后返回的图片地址：
+ {{ imgStr }}
+
+
+
+
+
+
+
+
+
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 3/9] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0+=E8=AF=B7?=
=?UTF-8?q?=E6=B1=82=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(url: string, formData: Record = {}) {
+ const loading = ref(false)
+ const error = ref(false)
+ const data = ref()
+
+ 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 @@
上传demo
+ 上传demo2(请求状态一体化)
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 @@
+
+{
+ layout: 'default',
+ style: {
+ navigationBarTitleText: '上传',
+ },
+}
+
+
+
+
+ 选择图片并上传
+ 上传...
+
+ 上传后返回的图片地址：
+ {{ data }}
+
+
+
+
+
+
+
+
+
+
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 4/9] =?UTF-8?q?feat:=20=E9=92=88=E5=AF=B9=E4=B8=8D?=
=?UTF-8?q?=E5=90=8C=E5=9C=BA=E6=99=AF=EF=BC=8C=E9=85=8D=E7=BD=AE2?=
=?UTF-8?q?=E4=B8=AA=E4=B8=8D=E5=90=8C=E7=9A=84=E4=B8=8A=E4=BC=A0=E5=9B=BE?=
=?UTF-8?q?=E7=89=87=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(url: string, formData: Record = {}) {
+export default function useUpload(formData: Record = {}) {
const loading = ref(false)
const error = ref(false)
const data = ref()
-
+ 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(url: string, formData: Record = {}) {
+ const loading = ref(false)
+ const error = ref(false)
+ const data = ref()
+
+ 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 @@