瀏覽代碼

feat(上传): 添加文件上传组件并支持环境变量配置

添加文件上传功能组件,并在上传钩子中使用环境变量配置基础URL
feige996 7 月之前
父節點
當前提交
fe7d81ff62
共有 3 個文件被更改,包括 31 次插入1 次删除
  1. 4 1
      src/hooks/useUpload.ts
  2. 2 0
      src/pages-sub/about/about.vue
  3. 25 0
      src/pages-sub/about/components/Upload.vue

+ 4 - 1
src/hooks/useUpload.ts

@@ -1,4 +1,7 @@
 import { ref } from 'vue'
+import { getEnvBaseUrl } from '@/utils/index'
+
+const VITE_UPLOAD_BASEURL = `${getEnvBaseUrl()}/upload`
 
 type TfileType = 'image' | 'file'
 type TImage = 'png' | 'jpg' | 'jpeg' | 'webp' | '*'
@@ -135,7 +138,7 @@ async function uploadFile({
   onComplete: () => void
 }) {
   uni.uploadFile({
-    url: '/upload',
+    url: VITE_UPLOAD_BASEURL,
     filePath: tempFilePath,
     name: 'file',
     formData,

+ 2 - 0
src/pages-sub/about/about.vue

@@ -4,6 +4,7 @@ import { LOGIN_PAGE } from '@/router/config'
 import { useTokenStore } from '@/store'
 import RequestOpenApiComp from './components/request-openapi.vue'
 import RequestComp from './components/request.vue'
+import UploadComp from './components/Upload.vue'
 import VBindCss from './components/VBindCss.vue'
 
 definePage({
@@ -105,6 +106,7 @@ onShow(() => {
     </view>
     <RequestOpenApiComp />
     <RequestComp />
+    <UploadComp />
     <VBindCss />
     <view class="mb-6 h-1px bg-#eee" />
     <view class="mb-2 text-center">

+ 25 - 0
src/pages-sub/about/components/Upload.vue

@@ -0,0 +1,25 @@
+<template>
+  <view class="p-4 text-center">
+    <wd-button @click="run">
+      选择图片并上传
+    </wd-button>
+    <view v-if="loading" class="h-10 text-blue">
+      上传...
+    </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.url" mode="scaleToFill" />
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const { loading, data, run } = useUpload()
+</script>