fix(useUpload): 优化文件选择逻辑,支持H5和小程序环境,增强错误处理

This commit is contained in:
feige996 2025-06-06 22:31:10 +08:00
parent 4e7dd994b4
commit b5a71b7788
2 changed files with 32 additions and 18 deletions

View File

@ -36,7 +36,21 @@ export default function useUpload<T extends TfileType>(options: TOptions<T> = {}
const chooseFileOptions = { const chooseFileOptions = {
count: 1, count: 1,
success: (res: any) => { success: (res: any) => {
handleFileChoose({ tempFilePath: res.tempFilePaths[0], tempFiles: res.tempFiles[0] }) console.log('File selected successfully:', res)
// h5中res:{errMsg: "chooseImage:ok", tempFilePaths: "blob:http://localhost:9000/f74ab6b8-a14d-4cb6-a10d-fcf4511a0de5", tempFiles: [File]}
// h5的File有一下字段{name: "girl.jpeg", size: 48976, type: "image/jpeg"}
// 小程序中res:{errMsg: "chooseImage:ok", tempFiles: [{fileType: "image", size: 48976, tempFilePath: "http://tmp/5iG1WpIxTaJf3ece38692a337dc06df7eb69ecb49c6b.jpeg"}]}
let tempFilePath = ''
let size = 0
// #ifdef H5
tempFilePath = res.tempFilePaths[0]
size = res.tempFiles[0].size
// #endif
// #ifdef MP-WEIXIN
tempFilePath = res.tempFiles[0].tempFilePath
size = res.tempFiles[0].size
// #endif
handleFileChoose({ tempFilePath, size })
}, },
fail: (err: any) => { fail: (err: any) => {
console.error('File selection failed:', err) console.error('File selection failed:', err)
@ -64,11 +78,8 @@ export default function useUpload<T extends TfileType>(options: TOptions<T> = {}
} }
} }
const handleFileChoose = (file: { const handleFileChoose = ({ tempFilePath, size }: { tempFilePath: string; size: number }) => {
tempFilePath: string if (size > maxSize) {
tempFiles?: { size?: number; name?: string }
}) => {
if (file?.tempFiles?.size && file.tempFiles.size > maxSize) {
uni.showToast({ uni.showToast({
title: `文件大小不能超过 ${maxSize / 1024 / 1024}MB`, title: `文件大小不能超过 ${maxSize / 1024 / 1024}MB`,
icon: 'none', icon: 'none',
@ -76,20 +87,20 @@ export default function useUpload<T extends TfileType>(options: TOptions<T> = {}
return return
} }
const fileExtension = file?.tempFiles?.name?.split('.').pop()?.toLowerCase() // const fileExtension = file?.tempFiles?.name?.split('.').pop()?.toLowerCase()
const isTypeValid = accept.some((type) => type === '*' || type.toLowerCase() === fileExtension) // const isTypeValid = accept.some((type) => type === '*' || type.toLowerCase() === fileExtension)
if (!isTypeValid) { // if (!isTypeValid) {
uni.showToast({ // uni.showToast({
title: `仅支持 ${accept.join(', ')} 格式的文件`, // title: `仅支持 ${accept.join(', ')} 格式的文件`,
icon: 'none', // icon: 'none',
}) // })
return // return
} // }
loading.value = true loading.value = true
uploadFile({ uploadFile({
tempFilePath: file.tempFilePath, tempFilePath: tempFilePath,
formData, formData,
onSuccess: (res) => { onSuccess: (res) => {
data.value = res data.value = res

View File

@ -134,10 +134,13 @@ const onChooseAvatar = (e: any) => {
console.log('选择头像', e.detail) console.log('选择头像', e.detail)
const { avatarUrl } = e.detail const { avatarUrl } = e.detail
const { run } = useUpload<IUploadSuccessInfo>( const { run } = useUpload<IUploadSuccessInfo>(
uploadFileUrl.USER_AVATAR, import.meta.env.VITE_UPLOAD_BASEURL,
{}, {},
{ {
onSuccess: (res) => useUserStore().getUserInfo(), onSuccess: (res) => {
console.log('头像上传成功', res)
//
},
}, },
avatarUrl, avatarUrl,
) )