hookehuyr

feat(拍照功能): 添加拍照上传功能并显示格式限制提示

添加拍照或选择媒体文件上传功能,支持图片和视频格式
显示文件格式和大小的限制提示信息
处理上传过程中的错误提示和成功反馈
......@@ -55,10 +55,13 @@
<!-- Photo button -->
<view class="px-5 mt-6">
<view class="w-full bg-blue-500 text-white py-3 rounded-lg flex items-center justify-center">
<view @tap="openCamera" class="w-full bg-blue-500 text-white py-3 rounded-lg flex flex-col items-center justify-center">
<view class="flex items-center justify-center">
<Photograph size="20" class="mr-2" />
拍照留念,奖励积分
</view>
<view class="text-xs text-gray-200 mt-1">支持jpg、png格式图片(≤10MB)或60秒内视频</view>
</view>
</view>
<!-- Family album -->
......@@ -90,6 +93,7 @@ import Taro from '@tarojs/taro';
import { Setting, Photograph, Right } from '@nutui/icons-vue-taro';
import BottomNav from '../../components/BottomNav.vue';
import PointsCollector from '@/components/PointsCollector.vue'
import BASE_URL from '@/utils/config';
const todaySteps = ref(2000);
const pointsCollectorRef = ref(null)
......@@ -149,4 +153,89 @@ const goToProfile = () => {
const openAlbumList = () => {
Taro.navigateTo({ url: '/pages/AlbumList/index' });
};
/**
* 显示提示信息
*/
const showToast = (message, type = 'success') => {
const icon = type === 'error' ? 'error' : 'success';
Taro.showToast({
title: message,
icon: icon,
duration: 2000
});
};
/**
* 上传文件到服务器
*/
const uploadFile = (filePath) => {
// 显示上传中提示
Taro.showLoading({
title: '上传中',
mask: true
});
wx.uploadFile({
url: BASE_URL + '/admin/?m=srv&a=upload',
filePath,
name: 'file',
header: {
'content-type': 'multipart/form-data',
},
success: function (res) {
let upload_data = JSON.parse(res.data);
Taro.hideLoading({
success: () => {
if (res.statusCode === 200) {
console.log('上传成功', upload_data.data.src);
showToast('上传成功', 'success');
} else {
showToast('服务器错误,稍后重试!', 'error');
}
},
});
},
fail: function (res) {
Taro.hideLoading({
success: () => {
showToast('上传失败,稍后重试!', 'error');
}
});
}
});
};
const openCamera = () => {
Taro.chooseMedia({
count: 1,
mediaType: ['image', 'video'],
sourceType: ['album', 'camera'],
maxDuration: 60,
sizeType: ['compressed'],
success: function (res) {
const tempFile = res.tempFiles[0];
const { tempFilePath, size, duration, fileType } = tempFile;
if (fileType === 'image') {
if (size > 10 * 1024 * 1024) {
showToast('图片大小不能超过10MB', 'error');
return;
}
}
if (fileType === 'video') {
if (duration > 60) {
showToast('视频时长不能超过60秒', 'error');
return;
}
}
uploadFile(tempFilePath);
},
fail: function () {
showToast('选择文件失败', 'error');
}
});
}
</script>
......