Node.js：来自获取的 PNG URL 的新文件

Posted 2023-03-22

【中文标题】Node.js：来自获取的 PNG URL 的新文件

【英文标题】：Node.js: new File from fetched PNG URL

【发布时间】：2021-09-03 03:45:35

【问题描述】：

我目前正在尝试将图像上传到 Supabase 的存储中，这看起来是 fairly simple from the docs

const  data, error  = await supabase.storage
  .from('avatars')
  .upload('public/avatar1.png', avatarFile)

不幸的是，Supabase 需要 File 类型。

在我的 API 中，我有一个指向我要保存的图像的 url，在我的 URL 中获取图像作为 Node.js 中的文件的最佳方式是什么？

我试过这个：

  let response;
  try 
    // fetch here is from the isomorphic-unfetch package so I can use it sever-side
    response = await fetch('https://example.com/image.jpeg');
   catch (err) 
    throw new Error(err);
  

  let data = await response?.blob();

  let metadata = 
    type: 'image/jpeg',
  ;

  let file = new File([data], 'test.jpg', metadata);
  return file;

但是我得到了一个ReferenceError: File is not defined，这让我相信只有浏览器才能创建一个new File()。

我只能找到关于fs 的答案，我认为这让谷歌感到困惑。我认为我不能使用 fs 来返回 File 类型。

有什么想法吗？

【参考方案1】：

你可以这样做：

const fspromise = require('fs').promises;
 let response;
  try 
    // fetch here is from the isomorphic-unfetch package so I can use it sever-side
    response = await fetch('https://example.com/image.jpeg');
   catch (err) 
    throw new Error(err);
  

  let data = await response?.blob();

  let metadata = 
    type: 'image/jpeg',
  ;

const file = blob2file(data);

function blob2file(blobData) 
  const fd = new FormData();
  fd.set('a', blobData);
  return fd.get('a');



const  data, error  = await supabase.storage
  .from('avatars')
  .upload('public/avatar1.png', file)

【讨论】：

不幸的是，这不适用于远程 URL。我认为它只是用于本地文件。

你为什么不临时下载文件并从存储中读取它并将其发送到 supabase。我会尝试想出更有效的方法来做到这一点。

不幸的是，这不是一个选项，它对 API 来说太密集了。

如果可以试试这个，其实你需要使用Filesystem来获取文件类型。

【参考方案2】：

所以你可以做的是：向文件发送一个 HTTP 请求

const fs = require('fs');
const http = require('http'); // maybe https?

const fileStream = fs.createWriteStream('image.png');

const request = http.get('URL_HERE', function(response) 
  response.pipe(fileStream);
);

上面的代码从 URL 中获取文件并将其写入你的服务器，然后你需要读取它并将它发送到上传过程。

const finalFile = fs.readFileSync( 'image.png', optionsObject );

现在您已经上传了文件对象，如果不再需要，请不要忘记将其删除。

【讨论】：

createWriteStream 返回 WriteStream，而不是 File。这似乎也不起作用。

更新了我的答案，希望现在对你有帮助@Eight

感谢您的编辑，但我无法将文件写入我的服务器然后上传，这会占用大量资源。

完全正确，我会考虑另一种解决方案。

【参考方案3】：

经过大量研究，这实际上是不可能的。我尝试了很多宣传能够将 blob 转换为 Files 的 npm 包，但它们似乎都不起作用。

唯一实际的解决方案是按照其他答案的建议下载文件，但在我的情况下这是不可行的。