// 测试修复后的头像上传流程
|
// 这个测试模拟小程序的头像选择和提交流程
|
|
console.log('🧪 开始测试修复后的头像上传流程...\n')
|
|
// 模拟小程序页面数据结构
|
const mockPageData = {
|
localAvatarPath: '', // 本地选择的头像路径
|
formData: {
|
avatarUrl: '',
|
avatarMediaId: ''
|
},
|
avatarUploading: false,
|
avatarUploadProgress: 0,
|
errors: {}
|
}
|
|
// 模拟头像选择函数（修复后的版本）
|
function mockChooseAvatar() {
|
console.log('📸 用户点击选择头像...')
|
|
// 模拟选择了一个头像文件
|
const mockTempFilePath = '/temp/avatar_123.jpg'
|
|
// 只保存本地路径，不立即上传
|
mockPageData.localAvatarPath = mockTempFilePath
|
mockPageData.errors.avatar = false
|
|
console.log('✅ 头像选择成功，本地路径:', mockTempFilePath)
|
console.log('💡 提示：头像已选择，提交时将自动上传')
|
console.log('📊 当前状态:', {
|
localAvatarPath: mockPageData.localAvatarPath,
|
avatarUrl: mockPageData.formData.avatarUrl,
|
avatarMediaId: mockPageData.formData.avatarMediaId
|
})
|
console.log('')
|
}
|
|
// 模拟头像删除函数（修复后的版本）
|
function mockDeleteAvatar() {
|
console.log('🗑️ 用户点击删除头像...')
|
|
const hasLocalAvatar = !!mockPageData.localAvatarPath
|
const hasUploadedAvatar = !!mockPageData.formData.avatarUrl
|
|
if (hasLocalAvatar) {
|
console.log('📱 删除本地选择的头像')
|
mockPageData.localAvatarPath = ''
|
console.log('✅ 本地头像已删除')
|
} else if (hasUploadedAvatar) {
|
console.log('☁️ 删除服务器上的头像')
|
mockPageData.formData.avatarUrl = ''
|
mockPageData.formData.avatarMediaId = ''
|
console.log('✅ 服务器头像已删除')
|
}
|
|
console.log('📊 删除后状态:', {
|
localAvatarPath: mockPageData.localAvatarPath,
|
avatarUrl: mockPageData.formData.avatarUrl,
|
avatarMediaId: mockPageData.formData.avatarMediaId
|
})
|
console.log('')
|
}
|
|
// 模拟头像验证函数（修复后的版本）
|
function mockValidateAvatar(requireAvatar = true) {
|
console.log('🔍 验证头像...')
|
|
if (requireAvatar) {
|
const hasAvatar = mockPageData.localAvatarPath ||
|
(mockPageData.formData.avatarUrl && mockPageData.formData.avatarMediaId)
|
|
if (!hasAvatar) {
|
mockPageData.errors.avatar = '请选择头像'
|
console.log('❌ 验证失败：请选择头像')
|
return false
|
}
|
}
|
|
console.log('✅ 头像验证通过')
|
return true
|
}
|
|
// 模拟提交前上传头像函数（新增的功能）
|
async function mockUploadAvatarBeforeSubmit() {
|
if (!mockPageData.localAvatarPath) {
|
console.log('💡 无需上传头像（没有本地选择的头像）')
|
return
|
}
|
|
console.log('☁️ 开始上传头像到服务器...')
|
console.log('📁 本地文件路径:', mockPageData.localAvatarPath)
|
|
// 模拟上传进度
|
mockPageData.avatarUploading = true
|
for (let progress = 0; progress <= 100; progress += 25) {
|
mockPageData.avatarUploadProgress = progress
|
console.log(`📈 上传进度: ${progress}%`)
|
await new Promise(resolve => setTimeout(resolve, 200)) // 模拟延迟
|
}
|
|
// 模拟上传成功
|
const mockUploadResult = {
|
url: 'https://example.com/avatars/avatar_123.jpg',
|
key: 'avatars/avatar_123.jpg'
|
}
|
|
mockPageData.formData.avatarUrl = mockUploadResult.url
|
mockPageData.formData.avatarMediaId = mockUploadResult.key
|
mockPageData.localAvatarPath = '' // 清空本地路径
|
mockPageData.avatarUploading = false
|
mockPageData.avatarUploadProgress = 0
|
|
console.log('✅ 头像上传成功!')
|
console.log('🔗 头像URL:', mockUploadResult.url)
|
console.log('🔑 Media ID:', mockUploadResult.key)
|
console.log('')
|
}
|
|
// 模拟表单提交函数（修复后的版本）
|
async function mockSubmitForm() {
|
console.log('📝 开始提交表单...')
|
|
// 1. 验证表单（包括头像）
|
if (!mockValidateAvatar(true)) {
|
console.log('❌ 表单验证失败，停止提交')
|
return false
|
}
|
|
// 2. 如果有本地头像，先上传头像
|
await mockUploadAvatarBeforeSubmit()
|
|
// 3. 准备提交数据
|
const submitData = {
|
playerInfo: {
|
avatarMediaId: mockPageData.formData.avatarMediaId
|
}
|
// ... 其他表单数据
|
}
|
|
console.log('📤 提交数据:', submitData)
|
console.log('✅ 表单提交成功!')
|
return true
|
}
|
|
// 运行测试
|
async function runTests() {
|
console.log('='.repeat(60))
|
console.log('测试场景 1: 选择头像 -> 提交')
|
console.log('='.repeat(60))
|
|
// 重置状态
|
mockPageData.localAvatarPath = ''
|
mockPageData.formData.avatarUrl = ''
|
mockPageData.formData.avatarMediaId = ''
|
|
mockChooseAvatar()
|
await mockSubmitForm()
|
|
console.log('\n' + '='.repeat(60))
|
console.log('测试场景 2: 选择头像 -> 删除 -> 重新选择 -> 提交')
|
console.log('='.repeat(60))
|
|
// 重置状态
|
mockPageData.localAvatarPath = ''
|
mockPageData.formData.avatarUrl = ''
|
mockPageData.formData.avatarMediaId = ''
|
|
mockChooseAvatar()
|
mockDeleteAvatar()
|
mockChooseAvatar()
|
await mockSubmitForm()
|
|
console.log('\n' + '='.repeat(60))
|
console.log('测试场景 3: 未选择头像直接提交（应该失败）')
|
console.log('='.repeat(60))
|
|
// 重置状态
|
mockPageData.localAvatarPath = ''
|
mockPageData.formData.avatarUrl = ''
|
mockPageData.formData.avatarMediaId = ''
|
|
await mockSubmitForm()
|
|
console.log('\n' + '='.repeat(60))
|
console.log('🎉 所有测试完成!')
|
console.log('='.repeat(60))
|
|
console.log('\n📋 修复总结:')
|
console.log('✅ 1. 头像选择时不再立即上传，只做本地预览')
|
console.log('✅ 2. 提交表单时才上传头像到服务器')
|
console.log('✅ 3. 支持删除本地选择的头像')
|
console.log('✅ 4. 表单验证支持本地选择的头像')
|
console.log('✅ 5. 上传进度显示正常')
|
}
|
|
// 运行测试
|
runTests().catch(console.error)
|
