feat(拍照功能): 添加拍照上传功能并显示格式限制提示
添加拍照或选择媒体文件上传功能,支持图片和视频格式 显示文件格式和大小的限制提示信息 处理上传过程中的错误提示和成功反馈
Showing
1 changed file
with
92 additions
and
3 deletions
| ... | @@ -55,9 +55,12 @@ | ... | @@ -55,9 +55,12 @@ |
| 55 | 55 | ||
| 56 | <!-- Photo button --> | 56 | <!-- Photo button --> |
| 57 | <view class="px-5 mt-6"> | 57 | <view class="px-5 mt-6"> |
| 58 | - <view class="w-full bg-blue-500 text-white py-3 rounded-lg flex items-center justify-center"> | 58 | + <view @tap="openCamera" class="w-full bg-blue-500 text-white py-3 rounded-lg flex flex-col items-center justify-center"> |
| 59 | - <Photograph size="20" class="mr-2" /> | 59 | + <view class="flex items-center justify-center"> |
| 60 | - 拍照留念,奖励积分 | 60 | + <Photograph size="20" class="mr-2" /> |
| 61 | + 拍照留念,奖励积分 | ||
| 62 | + </view> | ||
| 63 | + <view class="text-xs text-gray-200 mt-1">支持jpg、png格式图片(≤10MB)或60秒内视频</view> | ||
| 61 | </view> | 64 | </view> |
| 62 | </view> | 65 | </view> |
| 63 | 66 | ||
| ... | @@ -90,6 +93,7 @@ import Taro from '@tarojs/taro'; | ... | @@ -90,6 +93,7 @@ import Taro from '@tarojs/taro'; |
| 90 | import { Setting, Photograph, Right } from '@nutui/icons-vue-taro'; | 93 | import { Setting, Photograph, Right } from '@nutui/icons-vue-taro'; |
| 91 | import BottomNav from '../../components/BottomNav.vue'; | 94 | import BottomNav from '../../components/BottomNav.vue'; |
| 92 | import PointsCollector from '@/components/PointsCollector.vue' | 95 | import PointsCollector from '@/components/PointsCollector.vue' |
| 96 | +import BASE_URL from '@/utils/config'; | ||
| 93 | 97 | ||
| 94 | const todaySteps = ref(2000); | 98 | const todaySteps = ref(2000); |
| 95 | const pointsCollectorRef = ref(null) | 99 | const pointsCollectorRef = ref(null) |
| ... | @@ -149,4 +153,89 @@ const goToProfile = () => { | ... | @@ -149,4 +153,89 @@ const goToProfile = () => { |
| 149 | const openAlbumList = () => { | 153 | const openAlbumList = () => { |
| 150 | Taro.navigateTo({ url: '/pages/AlbumList/index' }); | 154 | Taro.navigateTo({ url: '/pages/AlbumList/index' }); |
| 151 | }; | 155 | }; |
| 156 | + | ||
| 157 | +/** | ||
| 158 | + * 显示提示信息 | ||
| 159 | + */ | ||
| 160 | +const showToast = (message, type = 'success') => { | ||
| 161 | + const icon = type === 'error' ? 'error' : 'success'; | ||
| 162 | + Taro.showToast({ | ||
| 163 | + title: message, | ||
| 164 | + icon: icon, | ||
| 165 | + duration: 2000 | ||
| 166 | + }); | ||
| 167 | +}; | ||
| 168 | + | ||
| 169 | +/** | ||
| 170 | + * 上传文件到服务器 | ||
| 171 | + */ | ||
| 172 | +const uploadFile = (filePath) => { | ||
| 173 | + // 显示上传中提示 | ||
| 174 | + Taro.showLoading({ | ||
| 175 | + title: '上传中', | ||
| 176 | + mask: true | ||
| 177 | + }); | ||
| 178 | + | ||
| 179 | + wx.uploadFile({ | ||
| 180 | + url: BASE_URL + '/admin/?m=srv&a=upload', | ||
| 181 | + filePath, | ||
| 182 | + name: 'file', | ||
| 183 | + header: { | ||
| 184 | + 'content-type': 'multipart/form-data', | ||
| 185 | + }, | ||
| 186 | + success: function (res) { | ||
| 187 | + let upload_data = JSON.parse(res.data); | ||
| 188 | + Taro.hideLoading({ | ||
| 189 | + success: () => { | ||
| 190 | + if (res.statusCode === 200) { | ||
| 191 | + console.log('上传成功', upload_data.data.src); | ||
| 192 | + showToast('上传成功', 'success'); | ||
| 193 | + } else { | ||
| 194 | + showToast('服务器错误,稍后重试!', 'error'); | ||
| 195 | + } | ||
| 196 | + }, | ||
| 197 | + }); | ||
| 198 | + }, | ||
| 199 | + fail: function (res) { | ||
| 200 | + Taro.hideLoading({ | ||
| 201 | + success: () => { | ||
| 202 | + showToast('上传失败,稍后重试!', 'error'); | ||
| 203 | + } | ||
| 204 | + }); | ||
| 205 | + } | ||
| 206 | + }); | ||
| 207 | +}; | ||
| 208 | + | ||
| 209 | +const openCamera = () => { | ||
| 210 | + Taro.chooseMedia({ | ||
| 211 | + count: 1, | ||
| 212 | + mediaType: ['image', 'video'], | ||
| 213 | + sourceType: ['album', 'camera'], | ||
| 214 | + maxDuration: 60, | ||
| 215 | + sizeType: ['compressed'], | ||
| 216 | + success: function (res) { | ||
| 217 | + const tempFile = res.tempFiles[0]; | ||
| 218 | + const { tempFilePath, size, duration, fileType } = tempFile; | ||
| 219 | + | ||
| 220 | + if (fileType === 'image') { | ||
| 221 | + if (size > 10 * 1024 * 1024) { | ||
| 222 | + showToast('图片大小不能超过10MB', 'error'); | ||
| 223 | + return; | ||
| 224 | + } | ||
| 225 | + } | ||
| 226 | + | ||
| 227 | + if (fileType === 'video') { | ||
| 228 | + if (duration > 60) { | ||
| 229 | + showToast('视频时长不能超过60秒', 'error'); | ||
| 230 | + return; | ||
| 231 | + } | ||
| 232 | + } | ||
| 233 | + | ||
| 234 | + uploadFile(tempFilePath); | ||
| 235 | + }, | ||
| 236 | + fail: function () { | ||
| 237 | + showToast('选择文件失败', 'error'); | ||
| 238 | + } | ||
| 239 | + }); | ||
| 240 | +} | ||
| 152 | </script> | 241 | </script> | ... | ... |
-
Please register or login to post a comment