将图片Url转为File对象

转换方法：

import axios from 'axios'
/**
 * 网络地址图片转File对象
 * @param {string} imgUrl 图片网络地址
 * @returns {Promise<File>} 返回File对象
 */
export default async function convertImageUrlToFile(imgUrl) {
  const res = await axios({
    method: 'GET',
    url: imgUrl,
    responseType: 'blob' // 将响应数据类型设置为blob
  })

  // 从URL中提取文件名
  const filename = imgUrl.split('/').pop()
  const blob = res.data
  //  创建File对象
  const file = new File([blob], filename, { type: blob.type })

  return file
}

作用：

1.File对象是二进制格式对象Blob大对象的子类，提供了更完整的元信息：

• lastModified: 生成时的时间戳。
• name:图片的文件名（如preview.png）。
• lastModifiedDate:Date 对象，非标准属性，存在兼容性问题。
• type:继承Blob，表示文件的 MIME 类型,如图片格式 image/jpeg、image/png，文本格式 text/plain 等。
• size:继承Blob，表示的二进制数据大小，单位为字节（Byte）。

如下图是一个File对象：

2.兼容<input type="file"/>，通过 <input type="file"> 选择本地文件后，获取到的就是 File 对象，所以可直接复用本地文件上传的逻辑（无需额外修改代码）。

3.支持 FormData 表单提交

// File 对象可直接放入 FormData 上传，后端无需区分是本地文件还是远程转换的文件
const formData = new FormData();
formData.append('uploadFile', file); // file 是转换后的 File 对象
// 直接上传，与本地文件上传逻辑完全一致
axios.post('/api/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

4.兼容ElementPlus等第三方库，Element UI 的 el-upload上传组件，可直接将 File 对象传入组件的上传方法

注意事项： 跨域问题：若图片 URL 对应的服务器未配置跨域允许（CORS），则浏览器会拦截该请求，导致函数执行失败（需图片服务器支持跨域，或通过后端代理转发图片请求）。