411 lines
11 KiB
TypeScript
411 lines
11 KiB
TypeScript
|
/**
|
|||
|
|
* 文件上传工具
|
|||
|
|
*
|
|||
|
|
* 支持两种上传模式：
|
|||
|
|
* - server: 后端上传（默认）
|
|||
|
|
* - client: 前端直连上传（仅支持 S3 服务）
|
|||
|
|
*
|
|||
|
|
* 通过环境变量 VITE_UPLOAD_TYPE 配置
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { useToast } from 'wot-design-uni'
|
|||
|
|
import * as FileApi from '@/api/infra/file'
|
|||
|
|
|
|||
|
|
/** 上传类型 */
|
|||
|
|
const UPLOAD_TYPE = {
|
|||
|
|
/** 客户端直接上传（只支持S3服务） */
|
|||
|
|
CLIENT: 'client',
|
|||
|
|
/** 客户端发送到后端上传 */
|
|||
|
|
SERVER: 'server',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 读取文件二进制内容
|
|||
|
|
* @param uniFile 文件对象
|
|||
|
|
*/
|
|||
|
|
async function readFile(uniFile: { path: string, arrayBuffer?: () => Promise<ArrayBuffer> }): Promise<ArrayBuffer | string> {
|
|||
|
|
// 微信小程序
|
|||
|
|
if (uni.getFileSystemManager) {
|
|||
|
|
const fs = uni.getFileSystemManager()
|
|||
|
|
return fs.readFileSync(uniFile.path) as ArrayBuffer
|
|||
|
|
}
|
|||
|
|
// H5 等
|
|||
|
|
if (uniFile.arrayBuffer) {
|
|||
|
|
return uniFile.arrayBuffer()
|
|||
|
|
}
|
|||
|
|
throw new Error('不支持的文件读取方式')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建文件记录（异步）
|
|||
|
|
* @param presignedInfo 预签名信息
|
|||
|
|
* @param file 文件信息
|
|||
|
|
*/
|
|||
|
|
function createFileRecord(presignedInfo: FileApi.FilePresignedUrlRespVO, file: { name: string, type?: string, size?: number }) {
|
|||
|
|
const fileVo: FileApi.FileCreateReqVO = {
|
|||
|
|
configId: presignedInfo.configId,
|
|||
|
|
url: presignedInfo.url,
|
|||
|
|
path: presignedInfo.path,
|
|||
|
|
name: file.name,
|
|||
|
|
type: file.type,
|
|||
|
|
size: file.size,
|
|||
|
|
}
|
|||
|
|
FileApi.createFile(fileVo).catch((err) => {
|
|||
|
|
console.error('创建文件记录失败:', err, fileVo)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 从文件路径上传文件（纯文件上传）
|
|||
|
|
* @param filePath 文件路径
|
|||
|
|
* @param directory 目录（可选）
|
|||
|
|
* @returns 文件访问 URL
|
|||
|
|
*/
|
|||
|
|
export async function uploadFileFromPath(filePath: string, directory?: string, fileType?: string): Promise<string> {
|
|||
|
|
const fileName = filePath.includes('/') ? filePath.substring(filePath.lastIndexOf('/') + 1) : filePath
|
|||
|
|
const uploadType = import.meta.env.VITE_UPLOAD_TYPE || UPLOAD_TYPE.SERVER
|
|||
|
|
// 根据文件后缀推断 MIME 类型
|
|||
|
|
const mimeType = fileType || getMimeType(fileName)
|
|||
|
|
|
|||
|
|
// 情况一：前端直连上传
|
|||
|
|
if (uploadType === UPLOAD_TYPE.CLIENT) {
|
|||
|
|
// 1.1 获取文件预签名地址
|
|||
|
|
const presignedInfo = await FileApi.getFilePresignedUrl(fileName, directory)
|
|||
|
|
|
|||
|
|
// 1.2 获取二进制文件对象
|
|||
|
|
const fileBuffer = await readFile({ path: filePath })
|
|||
|
|
|
|||
|
|
// 返回上传的 Promise
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
// 1.3 上传到 S3
|
|||
|
|
uni.request({
|
|||
|
|
url: presignedInfo.uploadUrl,
|
|||
|
|
method: 'PUT',
|
|||
|
|
header: {
|
|||
|
|
'Content-Type': mimeType,
|
|||
|
|
},
|
|||
|
|
data: fileBuffer,
|
|||
|
|
success: () => {
|
|||
|
|
// 1.4. 记录文件信息到后端（异步）
|
|||
|
|
createFileRecord(presignedInfo, { name: fileName, type: mimeType })
|
|||
|
|
// 1.5 返回文件访问 URL
|
|||
|
|
resolve(presignedInfo.url)
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('上传到S3失败:', err, presignedInfo)
|
|||
|
|
reject(err)
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// 情况二：后端上传
|
|||
|
|
return FileApi.uploadFile(filePath, directory)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 根据文件名获取 MIME 类型 */
|
|||
|
|
function getMimeType(fileName: string): string {
|
|||
|
|
const ext = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
|
|||
|
|
const mimeTypes: Record<string, string> = {
|
|||
|
|
jpg: 'image/jpeg',
|
|||
|
|
jpeg: 'image/jpeg',
|
|||
|
|
png: 'image/png',
|
|||
|
|
gif: 'image/gif',
|
|||
|
|
webp: 'image/webp',
|
|||
|
|
bmp: 'image/bmp',
|
|||
|
|
svg: 'image/svg+xml',
|
|||
|
|
mp4: 'video/mp4',
|
|||
|
|
mov: 'video/quicktime',
|
|||
|
|
avi: 'video/x-msvideo',
|
|||
|
|
pdf: 'application/pdf',
|
|||
|
|
doc: 'application/msword',
|
|||
|
|
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
|||
|
|
xls: 'application/vnd.ms-excel',
|
|||
|
|
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|||
|
|
}
|
|||
|
|
return mimeTypes[ext] || 'application/octet-stream'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface UploadOptions {
|
|||
|
|
/** 最大可选择的图片数量，默认为1 */
|
|||
|
|
count?: number
|
|||
|
|
/** 所选的图片的尺寸，original-原图，compressed-压缩图 */
|
|||
|
|
sizeType?: Array<'original' | 'compressed'>
|
|||
|
|
/** 选择图片的来源，album-相册，camera-相机 */
|
|||
|
|
sourceType?: Array<'album' | 'camera'>
|
|||
|
|
/** 文件大小限制，单位：MB */
|
|||
|
|
maxSize?: number //
|
|||
|
|
/** 上传进度回调函数 */
|
|||
|
|
onProgress?: (progress: number) => void
|
|||
|
|
/** 上传成功回调函数 */
|
|||
|
|
onSuccess?: (res: Record<string, any>) => void
|
|||
|
|
/** 上传失败回调函数 */
|
|||
|
|
onError?: (err: Error | UniApp.GeneralCallbackResult) => void
|
|||
|
|
/** 上传完成回调函数（无论成功失败） */
|
|||
|
|
onComplete?: () => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 文件上传钩子函数（带 formData）
|
|||
|
|
* @template T 上传成功后返回的数据类型
|
|||
|
|
* @param url 上传地址
|
|||
|
|
* @param formData 额外的表单数据
|
|||
|
|
* @param options 上传选项
|
|||
|
|
* @returns 上传状态和控制对象
|
|||
|
|
*/
|
|||
|
|
export function useUpload<T = string>(url: string, formData: Record<string, any> = {}, options: UploadOptions = {},
|
|||
|
|
/** 直接传入文件路径，跳过选择器 */
|
|||
|
|
directFilePath?: string) {
|
|||
|
|
/** 上传中状态 */
|
|||
|
|
const loading = ref(false)
|
|||
|
|
/** 上传错误状态 */
|
|||
|
|
const error = ref(false)
|
|||
|
|
/** 上传成功后的响应数据 */
|
|||
|
|
const data = ref<T>()
|
|||
|
|
/** 上传进度（0-100） */
|
|||
|
|
const progress = ref(0)
|
|||
|
|
const toast = useToast()
|
|||
|
|
|
|||
|
|
/** 解构上传选项，设置默认值 */
|
|||
|
|
const {
|
|||
|
|
/** 最大可选择的图片数量 */
|
|||
|
|
count = 1,
|
|||
|
|
/** 所选的图片的尺寸 */
|
|||
|
|
sizeType = ['original', 'compressed'],
|
|||
|
|
/** 选择图片的来源 */
|
|||
|
|
sourceType = ['album', 'camera'],
|
|||
|
|
/** 文件大小限制（MB） */
|
|||
|
|
maxSize = 10,
|
|||
|
|
/** 进度回调 */
|
|||
|
|
onProgress,
|
|||
|
|
/** 成功回调 */
|
|||
|
|
onSuccess,
|
|||
|
|
/** 失败回调 */
|
|||
|
|
onError,
|
|||
|
|
/** 完成回调 */
|
|||
|
|
onComplete,
|
|||
|
|
} = options
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 检查文件大小是否超过限制
|
|||
|
|
* @param size 文件大小（字节）
|
|||
|
|
* @returns 是否通过检查
|
|||
|
|
*/
|
|||
|
|
const checkFileSize = (size: number) => {
|
|||
|
|
const sizeInMB = size / 1024 / 1024
|
|||
|
|
if (sizeInMB > maxSize) {
|
|||
|
|
// 注释 by 芋艿：使用 wd-toast 替代
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: `文件大小不能超过${maxSize}MB`,
|
|||
|
|
// icon: 'none',
|
|||
|
|
// })
|
|||
|
|
toast.show(`文件大小不能超过${maxSize}MB`)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 触发文件选择和上传
|
|||
|
|
* 根据平台使用不同的选择器：
|
|||
|
|
* - 微信小程序使用 chooseMedia
|
|||
|
|
* - 其他平台使用 chooseImage
|
|||
|
|
*/
|
|||
|
|
const run = () => {
|
|||
|
|
if (directFilePath) {
|
|||
|
|
// 直接使用传入的文件路径
|
|||
|
|
loading.value = true
|
|||
|
|
progress.value = 0
|
|||
|
|
uploadFile<T>({
|
|||
|
|
url,
|
|||
|
|
tempFilePath: directFilePath,
|
|||
|
|
formData,
|
|||
|
|
data,
|
|||
|
|
error,
|
|||
|
|
loading,
|
|||
|
|
progress,
|
|||
|
|
onProgress,
|
|||
|
|
onSuccess,
|
|||
|
|
onError,
|
|||
|
|
onComplete,
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
// 微信小程序环境下使用 chooseMedia API
|
|||
|
|
uni.chooseMedia({
|
|||
|
|
count,
|
|||
|
|
mediaType: ['image'], // 仅支持图片类型
|
|||
|
|
sourceType,
|
|||
|
|
success: (res) => {
|
|||
|
|
const file = res.tempFiles[0]
|
|||
|
|
// 检查文件大小是否符合限制
|
|||
|
|
if (!checkFileSize(file.size))
|
|||
|
|
return
|
|||
|
|
|
|||
|
|
// 开始上传
|
|||
|
|
loading.value = true
|
|||
|
|
progress.value = 0
|
|||
|
|
uploadFile<T>({
|
|||
|
|
url,
|
|||
|
|
tempFilePath: file.tempFilePath,
|
|||
|
|
formData,
|
|||
|
|
data,
|
|||
|
|
error,
|
|||
|
|
loading,
|
|||
|
|
progress,
|
|||
|
|
onProgress,
|
|||
|
|
onSuccess,
|
|||
|
|
onError,
|
|||
|
|
onComplete,
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('选择媒体文件失败:', err)
|
|||
|
|
error.value = true
|
|||
|
|
onError?.(err)
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef MP-WEIXIN
|
|||
|
|
// 非微信小程序环境下使用 chooseImage API
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count,
|
|||
|
|
sizeType,
|
|||
|
|
sourceType,
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('选择图片成功:', res)
|
|||
|
|
|
|||
|
|
// 开始上传
|
|||
|
|
loading.value = true
|
|||
|
|
progress.value = 0
|
|||
|
|
uploadFile<T>({
|
|||
|
|
url,
|
|||
|
|
tempFilePath: res.tempFilePaths[0],
|
|||
|
|
formData,
|
|||
|
|
data,
|
|||
|
|
error,
|
|||
|
|
loading,
|
|||
|
|
progress,
|
|||
|
|
onProgress,
|
|||
|
|
onSuccess,
|
|||
|
|
onError,
|
|||
|
|
onComplete,
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('选择图片失败:', err)
|
|||
|
|
error.value = true
|
|||
|
|
onError?.(err)
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return { loading, error, data, progress, run }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 文件上传选项接口
|
|||
|
|
* @template T 上传成功后返回的数据类型
|
|||
|
|
*/
|
|||
|
|
interface UploadFileOptions<T> {
|
|||
|
|
/** 上传地址 */
|
|||
|
|
url: string
|
|||
|
|
/** 临时文件路径 */
|
|||
|
|
tempFilePath: string
|
|||
|
|
/** 额外的表单数据 */
|
|||
|
|
formData: Record<string, any>
|
|||
|
|
/** 上传成功后的响应数据 */
|
|||
|
|
data: Ref<T | undefined>
|
|||
|
|
/** 上传错误状态 */
|
|||
|
|
error: Ref<boolean>
|
|||
|
|
/** 上传中状态 */
|
|||
|
|
loading: Ref<boolean>
|
|||
|
|
/** 上传进度（0-100） */
|
|||
|
|
progress: Ref<number>
|
|||
|
|
/** 上传进度回调 */
|
|||
|
|
onProgress?: (progress: number) => void
|
|||
|
|
/** 上传成功回调 */
|
|||
|
|
onSuccess?: (res: Record<string, any>) => void
|
|||
|
|
/** 上传失败回调 */
|
|||
|
|
onError?: (err: Error | UniApp.GeneralCallbackResult) => void
|
|||
|
|
/** 上传完成回调 */
|
|||
|
|
onComplete?: () => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 执行文件上传（带 formData）
|
|||
|
|
* @template T 上传成功后返回的数据类型
|
|||
|
|
* @param options 上传选项
|
|||
|
|
*/
|
|||
|
|
function uploadFile<T>({
|
|||
|
|
url,
|
|||
|
|
tempFilePath,
|
|||
|
|
formData,
|
|||
|
|
data,
|
|||
|
|
error,
|
|||
|
|
loading,
|
|||
|
|
progress,
|
|||
|
|
onProgress,
|
|||
|
|
onSuccess,
|
|||
|
|
onError,
|
|||
|
|
onComplete,
|
|||
|
|
}: UploadFileOptions<T>) {
|
|||
|
|
try {
|
|||
|
|
// 创建上传任务
|
|||
|
|
const uploadTask = uni.uploadFile({
|
|||
|
|
url,
|
|||
|
|
filePath: tempFilePath,
|
|||
|
|
name: 'file', // 文件对应的 key
|
|||
|
|
formData,
|
|||
|
|
header: {
|
|||
|
|
// H5环境下不需要手动设置Content-Type，让浏览器自动处理multipart格式
|
|||
|
|
// #ifndef H5
|
|||
|
|
'Content-Type': 'multipart/form-data',
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// 确保文件名称合法
|
|||
|
|
success: (uploadFileRes) => {
|
|||
|
|
console.log('上传文件成功:', uploadFileRes)
|
|||
|
|
try {
|
|||
|
|
// 解析响应数据
|
|||
|
|
const { data: _data } = JSON.parse(uploadFileRes.data)
|
|||
|
|
// 上传成功
|
|||
|
|
data.value = _data as T
|
|||
|
|
onSuccess?.(_data)
|
|||
|
|
} catch (err) {
|
|||
|
|
// 响应解析错误
|
|||
|
|
console.error('解析上传响应失败:', err)
|
|||
|
|
error.value = true
|
|||
|
|
onError?.(new Error('上传响应解析失败'))
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
// 上传请求失败
|
|||
|
|
console.error('上传文件失败:', err)
|
|||
|
|
error.value = true
|
|||
|
|
onError?.(err)
|
|||
|
|
},
|
|||
|
|
complete: () => {
|
|||
|
|
// 无论成功失败都执行
|
|||
|
|
loading.value = false
|
|||
|
|
onComplete?.()
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 监听上传进度
|
|||
|
|
uploadTask.onProgressUpdate((res) => {
|
|||
|
|
progress.value = res.progress
|
|||
|
|
onProgress?.(res.progress)
|
|||
|
|
})
|
|||
|
|
} catch (err) {
|
|||
|
|
// 创建上传任务失败
|
|||
|
|
console.error('创建上传任务失败:', err)
|
|||
|
|
error.value = true
|
|||
|
|
loading.value = false
|
|||
|
|
onError?.(new Error('创建上传任务失败'))
|
|||
|
|
}
|
|||
|
|
}
|