120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import type { ApiResponse } from '~/types/api'
|
||
|
||
/**
|
||
* 分批次上传图片
|
||
* @param {File[]} files - 需要上传的图片文件数组
|
||
* @param {string} url - 上传接口的 URL
|
||
* @param {number} batchSize - 每批次上传的文件数量（默认为 3）
|
||
* @returns {Promise<{ success: boolean, message: string, data: any[] }>} - 返回上传结果
|
||
*/
|
||
|
||
export async function uploadImagesInBatches(files: File[], batchSize = 3) {
|
||
const uploadResults = []
|
||
for (let i = 0; i < files.length; i++) {
|
||
const file = files[i]
|
||
|
||
// 创建 FormData 对象
|
||
const formData = new FormData()
|
||
formData.append('file', file) // 假设后端接收字段是 `file`
|
||
|
||
// 上传当前图片
|
||
try {
|
||
const res = await request.post<ApiResponse<{ url: string }>>('/file/imgUpload', formData, {
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data',
|
||
},
|
||
})
|
||
// const res = await mallProductFile(formData)
|
||
if (res && res.code === 200) {
|
||
uploadResults.push(res.data)
|
||
}
|
||
}
|
||
catch (error) {
|
||
throw new Error(`上传第 ${i + 1} 张图片失败!`);
|
||
}
|
||
}
|
||
return uploadResults
|
||
}
|
||
|
||
export async function uploadFileBatches(files, batchSize = 3) {
|
||
const uploadResults = []
|
||
|
||
for (let i = 0; i < files.length; i++) {
|
||
const file = files[i]
|
||
|
||
// 创建 FormData 对象
|
||
const formData = new FormData()
|
||
formData.append('file', file) // 假设后端接收字段是 `file`
|
||
|
||
// 上传当前图片
|
||
try {
|
||
const res = await request.post<ApiResponse<{ url: string }>>('/file/fileUpload', formData, {
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data',
|
||
},
|
||
})
|
||
// const res = await mallProductFile(formData)
|
||
uploadResults.push(res.data)
|
||
}
|
||
catch (error) {
|
||
throw new Error(`上传第 ${i + 1} 个文件失败!`);
|
||
// console.error(`文件上传失败: ${file.name}`, error)
|
||
// uploadResults.push({ success: false, error })
|
||
}
|
||
}
|
||
return uploadResults
|
||
}
|
||
// 定义进度类型
|
||
interface UploadProgress {
|
||
fileName: string
|
||
progress: number
|
||
status: 'pending' | 'uploading' | 'success' | 'error'
|
||
}
|
||
|
||
export async function uploadFile(
|
||
file: File,
|
||
onProgress?: (progress: UploadProgress) => void
|
||
) {
|
||
const progressData: UploadProgress = {
|
||
fileName: file.name,
|
||
progress: 0,
|
||
status: 'pending'
|
||
}
|
||
|
||
try {
|
||
const formData = new FormData()
|
||
formData.append('file', file)
|
||
|
||
progressData.status = 'uploading'
|
||
onProgress?.(progressData)
|
||
|
||
const res = await request.post<ApiResponse<{ url: string }>>(
|
||
'/file/fileUpload',
|
||
formData,
|
||
{
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data',
|
||
},
|
||
onUploadProgress: (progressEvent:any) => {
|
||
if (progressEvent.total) {
|
||
const percent = Math.round(
|
||
(progressEvent.loaded * 100) / progressEvent.total
|
||
)
|
||
progressData.progress = percent
|
||
onProgress?.(progressData)
|
||
}
|
||
},
|
||
}
|
||
)
|
||
|
||
progressData.status = 'success'
|
||
progressData.progress = 100
|
||
onProgress?.(progressData)
|
||
return res.data
|
||
|
||
} catch (error) {
|
||
progressData.status = 'error'
|
||
onProgress?.(progressData)
|
||
throw new Error('文件上传失败!')
|
||
}
|
||
} |