JavaScript中如何将图片URL转换为Blob/File对象上传

API 探路者

2026-10-4

解决方法

你代码的问题是把Image DOM对象直接传给了FormData，才会出现[object HTMLImageElement]的类型问题。你需要保存fetch返回的Blob数据，再包装为File类型传入即可，修改后的代码如下：

修改后的JS代码

// 全局变量存储返回的Blob数据，不要存Image元素
var imageBlob;
fetch('https://cdn.vox-cdn.com/thumbor/4hL2bA5OUf0lSqR2WlY9ogSYtTE=/152x62:1340x953/920x613/filters:focal(615x92:829x306):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/66220207/the_child_star_wars_gallery_5e3204be4f668.0.jpg')
  .then(res => res.blob())
  .then(blob => {
    // 存储blob数据
    imageBlob = blob;
    // 如果需要在页面展示图片，再单独创建Image对象使用，不影响上传逻辑
    let objectURL = URL.createObjectURL(blob);
    let myImage = new Image();
    myImage.src = objectURL;
    // 需要展示的话自行把myImage插入到对应DOM节点即可
  });

$("#approve").click(function() {
  // 增加加载判断，避免资源未就绪时报错
  if(!imageBlob) {
    alert('图片资源尚未加载完成，请稍后再试');
    return;
  }
  let formData = new FormData();
  // 将Blob包装为File对象，可自定义文件名
  let logoFile = new File([imageBlob], 'logo.jpg', { type: imageBlob.type });
  formData.append('logo', logoFile);
  // 测试打印，此时pair[1]就是File类型对象
  for (var pair of formData.entries()) {
    console.log(pair[0] + ', ', pair[1]);
  }
  // 后续正常发送formData即可
});