網(wǎng)絡(luò)圖片 URL
    ↓  axios 請求（responseType: 'blob'）
  Blob 對象
    ↓  new File([blob], filename, { type })
  File 對象 ?

import axios from 'axios'
/**
 * 將網(wǎng)絡(luò)圖片 URL 轉(zhuǎn)換為 File 對象
 * @param {string} imageUrl - 圖片的網(wǎng)絡(luò)地址
 * @param {string} fileName - 轉(zhuǎn)換后的文件名（默認 'image.png'）
 * @returns {Promise<File>} File 對象
 */
export async function urlToFile(imageUrl, fileName = 'image.png') {
  // 1. 使用 axios 以 blob 類型下載圖片
  const response = await axios.get(imageUrl, {
    responseType: 'blob',  // 關(guān)鍵配置：告訴 axios 返回二進制數(shù)據(jù)
  })
  // 2. 獲取 Blob 對象
  const blob = response.data
  // 3. 從 blob 的 MIME 類型推斷文件擴展名（可選優(yōu)化）
  const mimeType = blob.type  // 例如 'image/jpeg'、'image/png'
  // 4. 將 Blob 轉(zhuǎn)換為 File 對象
  const file = new File([blob], fileName, { type: mimeType })
  return file
}

import { urlToFile } from './utils/imageUtils'
async function handleImageUrl() {
  const imageUrl = 'https://example.com/photo.jpg'
  try {
    const file = await urlToFile(imageUrl, 'my-photo.jpg')
    console.log('轉(zhuǎn)換成功：', file)
    // File { name: 'my-photo.jpg', size: 12345, type: 'image/jpeg' }
    // 例：用于 FormData 上傳
    const formData = new FormData()
    formData.append('image', file)
    // await axios.post('/api/upload', formData)
  } catch (error) {
    console.error('轉(zhuǎn)換失?。?, error)
  }
}

import axios from 'axios'

// MIME 類型 -> 擴展名映射
const mimeToExt = {
  'image/jpeg': 'jpg',
  'image/png':  'png',
  'image/gif':  'gif',
  'image/webp': 'webp',
  'image/svg+xml': 'svg',
}

/**
 * 將網(wǎng)絡(luò)圖片 URL 轉(zhuǎn)換為 File 對象（自動推斷擴展名）
 * @param {string} imageUrl - 圖片網(wǎng)絡(luò)地址
 * @param {string} baseName - 文件基礎(chǔ)名（不含擴展名），默認 'image'
 * @returns {Promise<File>}
 */
export async function urlToFileAuto(imageUrl, baseName = 'image') {
  const response = await axios.get(imageUrl, {
    responseType: 'blob',
  })

  const blob = response.data
  const ext = mimeToExt[blob.type] || 'png'
  const fileName = `${baseName}.${ext}`

  return new File([blob], fileName, { type: blob.type })
}

// 前端請求自己的后端代理接口
const file = await urlToFile('/api/proxy-image?url=' + encodeURIComponent(imageUrl))

// Node.js / Express 后端示例
app.get('/api/proxy-image', async (req, res) => {
  const { url } = req.query
  const response = await axios.get(url, { responseType: 'stream' })
  response.data.pipe(res)
})

// vite.config.js
export default {
  server: {
    proxy: {
      '/img-proxy': {
        target: 'https://example.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/img-proxy/, '')
      }
    }
  }
}

import axios from 'axios'

const MIME_EXT_MAP: Record<string, string> = {
  'image/jpeg': 'jpg',
  'image/png': 'png',
  'image/gif': 'gif',
  'image/webp': 'webp',
}

export async function urlToFile(
  imageUrl: string,
  fileName?: string
): Promise<File> {
  const response = await axios.get<Blob>(imageUrl, {
    responseType: 'blob',
  })

  const blob = response.data
  const ext = MIME_EXT_MAP[blob.type] ?? 'png'
  const finalName = fileName ?? `image.${ext}`

  return new File([blob], finalName, { type: blob.type })
}