hookehuyr

refactor: 优化文件上传逻辑并移除未使用的代码

重构文件上传组件,添加实时上传功能并显示进度
移除未使用的组件导入和类型声明
将保存按钮文案改为"提交"以更准确表达功能
......@@ -14,7 +14,6 @@ declare module 'vue' {
NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutPicker: typeof import('@nutui/nutui-taro')['Picker']
......
<template>
<view class="min-h-screen flex flex-col bg-white">
<!-- <AppHeader title="加入家庭" /> -->
<view class="flex-1 px-4 pt-3 pb-6 flex flex-col">
<!-- Title -->
<h2 class="text-xl font-bold text-center mb-2">
......@@ -168,7 +167,6 @@
import { ref, computed, nextTick, onMounted, watch } from 'vue';
import Taro from '@tarojs/taro';
import { My, Check } from '@nutui/icons-vue-taro';
import AppHeader from '../../components/AppHeader.vue';
const mottoChars = ref(['', '', '', '']);
const selectedRole = ref('');
......
......@@ -84,7 +84,7 @@
@tap="saveMedia"
class="flex-1 bg-blue-500 text-white py-3 rounded-lg text-center"
>
保存
提交
</view>
</view>
<view class="mt-6 text-sm text-gray-500">
......@@ -176,7 +176,7 @@ const chooseMedia = () => {
maxDuration: 60,
sizeType: ['compressed'],
camera: 'back',
success: (res) => {
success: async (res) => {
const file = res.tempFiles[0];
// 检查文件大小(10MB限制)
......@@ -189,23 +189,48 @@ const chooseMedia = () => {
return;
}
// 根据文件类型设置不同的信息
if (file.fileType === 'image') {
uploadedFile.value = {
type: 'image',
url: file.tempFilePath,
size: file.size,
name: `image_${Date.now()}.jpg`
};
} else if (file.fileType === 'video') {
uploadedFile.value = {
type: 'video',
url: file.tempFilePath,
thumbnail: file.thumbTempFilePath,
duration: Math.floor(file.duration),
size: file.size,
name: `video_${Date.now()}.mp4`
};
// 显示上传进度
Taro.showLoading({ title: '上传中...' });
try {
// 立即上传文件到服务器
const serverUrl = await uploadFileToServer(file.tempFilePath);
// 根据文件类型设置不同的信息,包含服务器URL
if (file.fileType === 'image') {
uploadedFile.value = {
type: 'image',
url: file.tempFilePath,
serverUrl: serverUrl,
size: file.size,
name: `image_${Date.now()}.jpg`
};
} else if (file.fileType === 'video') {
uploadedFile.value = {
type: 'video',
url: file.tempFilePath,
serverUrl: serverUrl,
thumbnail: file.thumbTempFilePath,
duration: Math.floor(file.duration),
size: file.size,
name: `video_${Date.now()}.mp4`
};
}
Taro.hideLoading();
Taro.showToast({
title: '上传成功',
icon: 'success',
duration: 1500
});
} catch (error) {
console.error('上传失败:', error);
Taro.hideLoading();
Taro.showToast({
title: '上传失败,请重试',
icon: 'error',
duration: 2000
});
}
},
fail: (err) => {
......@@ -372,22 +397,38 @@ const saveMedia = async () => {
return;
}
if (!uploadedFile.value.serverUrl) {
Taro.showToast({
title: '文件上传未完成,请重新选择',
icon: 'error',
duration: 2000
});
return;
}
Taro.showLoading({
title: '上传中...',
title: '保存中...',
mask: true
});
try {
// 上传文件到服务器
const serverUrl = await uploadFileToServer(uploadedFile.value.url);
// 更新文件信息,保存服务器返回的URL
uploadedFile.value.serverUrl = serverUrl;
// TODO: 这里预留给后续的接口调用
// 调用后端接口保存媒体信息,传递 uploadedFile.value.serverUrl
// const result = await saveMediaToBackend({
// type: uploadedFile.value.type,
// url: uploadedFile.value.serverUrl,
// size: uploadedFile.value.size,
// name: uploadedFile.value.name,
// duration: uploadedFile.value.duration // 仅视频有此字段
// });
// 模拟接口调用
await new Promise(resolve => setTimeout(resolve, 1000));
Taro.hideLoading();
Taro.showToast({
title: '保存成功,获得积分奖励!',
icon: 'success',
icon: 'none',
duration: 2000
});
......@@ -399,10 +440,10 @@ const saveMedia = async () => {
// Taro.navigateBack();
}, 2000);
} catch (error) {
console.error('上传失败:', error);
console.error('保存失败:', error);
Taro.hideLoading();
Taro.showToast({
title: '上传失败,请重试',
title: '保存失败,请重试',
icon: 'error',
duration: 2000
});
......