XW-AIOT/aiot-uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 请求等页面

Browse Source
This commit is contained in:
菲鸽
2024-05-15 10:06:51 +08:00
parent 2b41626a96
commit 5bdb29994d
13 changed files with 79 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/hooks/useUpload.ts
View File

@@ -1,3 +1,6 @@
// TODO: 别忘加更改环境变量的 VITE_UPLOAD_BASEURL 地址。
const VITE_UPLOAD_BASEURL = import.meta.env.VITE_UPLOAD_BASEURL
/**
* useUpload 是一个定制化的请求钩子，用于处理上传图片。
* @param formData 额外传递给后台的数据，如{name: '菲鸽'}。
@@ -7,7 +10,6 @@ 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 代替。
@@ -19,23 +21,7 @@ export default function useUpload<T>(formData: Record<string, any> = {}) {
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
},
})
uploadFile<T>({ tempFilePath, formData, data, error, loading })
},
fail: (err) => {
console.log('uni.chooseMedia err->', err)
@@ -50,23 +36,7 @@ export default function useUpload<T>(formData: Record<string, any> = {}) {
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
},
})
uploadFile<T>({ tempFilePath, formData, data, error, loading })
},
fail: (err) => {
console.log('uni.chooseImage err->', err)
@@ -78,3 +48,23 @@ export default function useUpload<T>(formData: Record<string, any> = {}) {
return { loading, error, data, run }
}
function uploadFile<T>({ tempFilePath, formData, data, error, loading }) {
uni.uploadFile({
url: VITE_UPLOAD_BASEURL,
filePath: tempFilePath,
name: 'file',
formData,
success: (uploadFileRes) => {
console.log(uploadFileRes, typeof uploadFileRes.data)
data.value = JSON.parse(uploadFileRes.data) as T
},
fail: (err) => {
console.log('uni.uploadFile err->', err)
error.value = true
},
complete: () => {
loading.value = false
},
})
}

82
src/hooks/useUpload2.ts
View File

@@ -1,82 +0,0 @@
/**
* 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 }
}