useUpload.ts 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. // TODO: 别忘加更改环境变量的 VITE_UPLOAD_BASEURL 地址。
  2. import { getEvnBaseUploadUrl } from '@/utils'
  3. const VITE_UPLOAD_BASEURL = `${getEvnBaseUploadUrl()}`
  4. /**
  5. * useUpload 是一个定制化的请求钩子,用于处理上传图片。
  6. * @param formData 额外传递给后台的数据,如{name: '菲鸽'}。
  7. * @returns 返回一个对象{loading, error, data, run},包含请求的加载状态、错误信息、响应数据和手动触发请求的函数。
  8. */
  9. export default function useUpload<T = string>(formData: Record<string, any> = {}) {
  10. const loading = ref(false)
  11. const error = ref(false)
  12. const data = ref<T>()
  13. const run = () => {
  14. // #ifdef MP-WEIXIN
  15. // 微信小程序从基础库 2.21.0 开始, wx.chooseImage 停止维护,请使用 uni.chooseMedia 代替。
  16. // 微信小程序在2023年10月17日之后,使用本API需要配置隐私协议
  17. uni.chooseMedia({
  18. count: 1,
  19. mediaType: ['image'],
  20. success: (res) => {
  21. loading.value = true
  22. const tempFilePath = res.tempFiles[0].tempFilePath
  23. uploadFile<T>({ tempFilePath, formData, data, error, loading })
  24. },
  25. fail: (err) => {
  26. console.error('uni.chooseMedia err->', err)
  27. error.value = true
  28. },
  29. })
  30. // #endif
  31. // #ifndef MP-WEIXIN
  32. uni.chooseImage({
  33. count: 1,
  34. success: (res) => {
  35. loading.value = true
  36. const tempFilePath = res.tempFilePaths[0]
  37. uploadFile<T>({ tempFilePath, formData, data, error, loading })
  38. },
  39. fail: (err) => {
  40. console.error('uni.chooseImage err->', err)
  41. error.value = true
  42. },
  43. })
  44. // #endif
  45. }
  46. return { loading, error, data, run }
  47. }
  48. function uploadFile<T>({ tempFilePath, formData, data, error, loading }) {
  49. uni.uploadFile({
  50. url: VITE_UPLOAD_BASEURL,
  51. filePath: tempFilePath,
  52. name: 'file',
  53. formData,
  54. success: (uploadFileRes) => {
  55. data.value = uploadFileRes.data as T
  56. },
  57. fail: (err) => {
  58. console.error('uni.uploadFile err->', err)
  59. error.value = true
  60. },
  61. complete: () => {
  62. loading.value = false
  63. },
  64. })
  65. }