// 痛點(diǎn)1：圖片太大，上傳慢
uni.uploadFile({
  filePath: 'big-image.jpg'  // 5MB的圖片直接上傳
  // 用戶等得花兒都謝了
})

// 痛點(diǎn)2：登錄態(tài)過期
uni.uploadFile({
  success: (res) => {
    // {"code":405,"msg":"未登錄"}
    // 啥也沒發(fā)生，用戶繼續(xù)操作，然后報(bào)錯(cuò)
  }
})

// 痛點(diǎn)3：H5和小程序API不統(tǒng)一
// H5用 File/Blob
// 小程序用 tempFilePath
// 代碼里到處都是 #ifdef

async function compressImage(file: UploadFileItem, options: any): Promise<File | string> {
  // 未啟用壓縮，直接返回
  if (!options?.enabled) return file.url

  // H5平臺(tái)：使用 compressorjs
  // #ifdef H5
  return compressImageH5(file, options)
  // #endif

  // 小程序平臺(tái)：使用 uni.compressImage
  // #ifndef H5
  return new Promise((resolve) => {
    uni.compressImage({
      src: file.url,
      quality: options.quality || 80,
      width: options.maxWidth,
      height: options.maxHeight,
      success: (res) => resolve(res.tempFilePath),
      fail: () => resolve(file.url) // 壓縮失敗回退原圖
    })
  })
  // #endif
}

async function compressImageH5(file: UploadFileItem, options?: CompressOptions): Promise<File | string> {
  let { name: fileName, url: filePath } = file
  
  return new Promise((resolve) => {
    // 從blob URL獲取文件
    fetch(filePath)
      .then(res => res.blob())
      .then((blob) => {
        // compressorjs壓縮配置
        new Compressor(blob, {
          quality: (options?.quality || 80) / 100, // 轉(zhuǎn)換為0-1范圍
          maxWidth: options?.maxWidth,
          maxHeight: options?.maxHeight,
          mimeType: blob.type,
          success: (compressedBlob) => {
            // 生成標(biāo)準(zhǔn)File對(duì)象
            const fileName = `file-${Date.now()}.${blob.type.split('/')[1]}`
            const file = new File([compressedBlob], fileName, { type: blob.type })
            resolve(file)
          },
          error: () => resolve(filePath) // 壓縮失敗回退
        })
      })
      .catch(() => resolve(filePath))
  })
}

export function useUploadMethod(httpOptions: HttpOptions) {
  const { url, name, formData: data, header, timeout, onStart, onFinish, onSuccess, compress } = httpOptions

  const uploadMethod: UploadMethod = async (file, formData, options) => {
    // 1. 上傳開始鉤子
    onStart?.()

    // 2. 圖片壓縮（如果啟用）
    let filePath = file.url
    try {
      filePath = await compressImage(file, compress)
    } catch {
      filePath = file.url // 異常降級(jí)
    }

    // 3. 創(chuàng)建上傳任務(wù)
    const uploadTask = uni.uploadFile({
      url: options.action || url,
      header: { ...header, ...options.header },
      name: options.name || name,
      formData: { ...data, ...formData },
      timeout: timeout || 60000,
      
      // 4. 跨平臺(tái)文件參數(shù)處理
      ...(typeof File !== 'undefined' && filePath instanceof File 
          ? { file: filePath }   // H5: File對(duì)象
          : { filePath }),       // 小程序: 路徑字符串

      // 5. 響應(yīng)處理
      success: (res) => handleSuccess(res, file, options),
      fail: (err) => handleError(err, file, options)
    })

    // 6. 進(jìn)度監(jiān)聽
    uploadTask.onProgressUpdate((res) => {
      options.onProgress(res, file)
    })
  }

  return { uploadMethod }
}

// 上傳成功處理
function handleSuccess(res: any, file: UploadFileItem, options: any) {
  try {
    // 解析響應(yīng)數(shù)據(jù)
    const resData = JSON.parse(res.data) as ResData<any>
    
    // 狀態(tài)碼檢查
    if (res.statusCode >= 200 && res.statusCode < 300) {
      const { code, msg: errMsg = '上傳失敗' } = resData
      
      if (+code === 200) {
        // 上傳成功
        options.onSuccess(res, file, resData)
        onSuccess?.(res, file, resData)
        return
      }
      
      // 登錄態(tài)過期處理
      if (+code === 405 || errMsg.includes('未登錄')) {
        toast.show(errMsg || '登錄態(tài)失效')
        logout()
        login() // 自動(dòng)跳轉(zhuǎn)登錄頁(yè)
        return
      }
      
      // 其他業(yè)務(wù)錯(cuò)誤
      toast.show(errMsg)
      options.onError({ ...res, errMsg }, file, resData)
      return
    }
    
    // HTTP 401處理
    if (res.statusCode === 401) {
      toast.show('登錄態(tài)失效')
      logout()
      login()
      return
    }
    
    // 其他HTTP錯(cuò)誤
    toast.show(resData.msg || `服務(wù)出錯(cuò)：${res.statusCode}`)
    options.onError({ ...res, errMsg: '服務(wù)開小差了' }, file)
    
  } finally {
    onFinish?.() // 無論成功失敗都調(diào)用
  }
}

// 上傳失敗處理
function handleError(err: any, file: UploadFileItem, options: any) {
  try {
    toast.show('網(wǎng)絡(luò)錯(cuò)誤，請(qǐng)稍后再試')
    // 設(shè)置上傳失敗
    options.onError(err, file, formData)
  } finally {
    // 文件上傳完成時(shí)調(diào)用
    onFinish?.()
  }
} as any)

<template>
  <wd-upload
    :upload-method="uploadMethod"
    v-model:file-list="fileList"
    @change="handleChange"
  />
</template>

<script setup>
import { useUploadMethod } from './upload-method'

// 配置上傳方法
const { uploadMethod } = useUploadMethod({
  url: '/api/upload',
  name: 'file',
  header: {
    'Authorization': 'Bearer ' + getToken()
  },
  // 圖片壓縮配置
  compress: {
    enabled: true,
    quality: 80,
    maxWidth: 1920,
    maxHeight: 1080
  },
  // 鉤子函數(shù)
  onStart: () => console.log('開始上傳'),
  onSuccess: (res, file) => console.log('上傳成功', file),
  onFinish: () => console.log('上傳完成')
})
</script>