我来帮你搞定这个上传问题！你遇到的400错误核心原因是你把Blob URL字符串直接传给了File构造函数，而不是实际的Blob对象本身。Imgur API没法解析blob:http://...这类URL，自然会返回无效URL的错误。下面给你一步步的解决方案：

核心修复步骤 #

1. 把Blob URL转换成实际的Blob对象
   如果你的file变量是Blob URL（比如blob:http://xxx），需要先通过fetch将其转换成Blob对象，再用于上传：

   async dataCallBack(blobUrl) {
     // 第一步：将Blob URL转为Blob对象
     const fetchResponse = await fetch(blobUrl);
     const imageBlob = await fetchResponse.blob();
   
     // 第二步：创建FormData（Imgur要求multipart/form-data格式）
     const formData = new FormData();
     // 可以直接传Blob，也可以封装成File对象（二选一即可）
     formData.append("image", imageBlob); 
     // 或者：formData.append("image", new File([imageBlob], "giftpack.jpg", { type: imageBlob.type }));
   
     // 第三步：调用Imgur API上传
     try {
       const imgurResponse = await fetch("https://api.imgur.com/3/image", {
         method: "POST",
         headers: {
           // 替换成你的Imgur Client ID，必须携带！
           "Authorization": "Client-ID YOUR_IMGUR_CLIENT_ID"
         },
         body: formData
       });
   
       const result = await imgurResponse.json();
       console.log("上传成功：", result);
     } catch (err) {
       console.error("上传失败：", err);
     }
   }
   

2. 关键注意事项

   • 必须使用FormData来传递文件：Imgur API不接受直接将Blob/File作为请求体，需要用multipart/form-data格式封装。
   • 不要忽略Authorization头：请求必须携带你的Imgur Client ID，否则会返回权限错误（401）。
   • 若原始来源是File对象（比如从<input type="file">获取），可以直接使用，无需转Blob URL：

     async dataCallBack(selectedFile) {
       const formData = new FormData();
       formData.append("image", selectedFile);
       // 后续请求同上...
     }
     

内容的提问来源于stack exchange，提问作者Champer Wu