基于Axios将网络图片地址转换为File对象的实现方法

网络图片 URL
    ↓  axios 请求（responseType: 'blob'）
  Blob 对象
    ↓  new File([blob], filename, { type })
  File 对象 ✅

import axios from 'axios'
/**
 * 将网络图片 URL 转换为 File 对象
 * @param {string} imageUrl - 图片的网络地址
 * @param {string} fileName - 转换后的文件名（默认 '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',  // 关键配置：告诉 axios 返回二进制数据
  })
  // 2. 获取 Blob 对象
  const blob = response.data
  // 3. 从 blob 的 MIME 类型推断文件扩展名（可选优化）
  const mimeType = blob.type  // 例如 'image/jpeg'、'image/png'
  // 4. 将 Blob 转换为 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('转换成功：', 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('转换失败：', error)
  }
}

import axios from 'axios'

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

/**
 * 将网络图片 URL 转换为 File 对象（自动推断扩展名）
 * @param {string} imageUrl - 图片网络地址
 * @param {string} baseName - 文件基础名（不含扩展名），默认 '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 })
}