feat: 上传图片

src/pages.json

@@ -67,6 +67,14 @@
       "style": {
         "navigationBarTitleText": "请求"
       }
+    },
+    {
+      "path": "pages/index/upload",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "上传"
+      }
     }
   ],
   "subPackages": []

src/pages/index/about.vue

@@ -22,6 +22,9 @@
         去请求页2 (请求状态一体化)
       </wd-button>
     </view>
+    <view class="text-center mt-8 text-#fff">
+      <wd-button type="primary" @click="gotoPage('upload')">上传demo</wd-button>
+    </view>
   </view>
 </template>
 

src/pages/index/upload.vue

@@ -0,0 +1,75 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '上传',
+  },
+}
+</route>
+
+<template>
+  <view class="p-4 text-center">
+    <wd-button @click="chooseImage">选择图片并上传</wd-button>
+    <view class="m-2">上传后返回的图片地址：</view>
+    <view class="m-2">{{ imgStr }}</view>
+    <view class="h-80 w-full">
+      <image v-if="imgStr" :src="imgStr" mode="scaleToFill" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const imgStr = ref('')
+
+const chooseImage = () => {
+  // #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)
+      const tempFilePath = res.tempFiles[0].tempFilePath
+      uni.uploadFile({
+        url: 'https://ukw0y1.laf.run/uploadFile',
+        filePath: tempFilePath,
+        name: 'file',
+        formData: {
+          user: '菲鸽',
+        },
+        success: (uploadFileRes) => {
+          console.log(uploadFileRes.data)
+          imgStr.value = uploadFileRes.data
+        },
+      })
+    },
+  })
+  // #endif
+  // #ifndef MP-WEIXIN
+  uni.chooseImage({
+    count: 1,
+    success: (res) => {
+      console.log(res)
+      const tempFilePath = res.tempFilePaths[0]
+      uni.uploadFile({
+        url: 'https://ukw0y1.laf.run/uploadFile',
+        filePath: tempFilePath,
+        name: 'file',
+        formData: {
+          user: '菲鸽',
+        },
+        success: (uploadFileRes) => {
+          console.log(uploadFileRes.data)
+          imgStr.value = uploadFileRes.data
+        },
+      })
+    },
+  })
+  // #endif
+}
+</script>
+
+<style lang="scss" scoped>
+//
+</style>