使用JS将图片URL转换为文件（）对象

Question

在我的Vue应用程序的注册模块中，我允许用户在表单中上传图像。我将这些图像上传到存储中，并将该照片的下载URL保存在注册表中。在编辑注册表时，由于我拥有该URL，所以需要从存储中获取图片。但是我需要它成为一个file()对象。我已经找到了将其转换为blob的方法，但它需要成为一个文件。我该怎么办？

- Travinns

---

你解决了吗？我在React中遇到了类似的问题。 - user10033434

Answer 1

可以通过请求Blob并生成一个File对象来完成。需要指定Blob的MIME类型。

const urlToObject= async()=> {
  const response = await fetch(image);
  // here image is url/location of image
  const blob = await response.blob();
  const file = new File([blob], 'image.jpg', {type: blob.type});
  console.log(file);
}

- Deepak Kumrawat

---

这种解决方案的问题在于，获取图片时可能会被CORS策略阻止。 - Claros

绘制一个图像元素，然后将其转换为文件。 https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome 然后 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS - undefined

Answer 2

ES6的方式，使用Promise：

const blobUrlToFile = (blobUrl:string): Promise<File> => new Promise((resolve) => {
    fetch(blobUrl).then((res) => {
      res.blob().then((blob) => {
        // please change the file.extension with something more meaningful
        // or create a utility function to parse from URL
        const file = new File([blob], 'file.extension', {type: blob.type})
        resolve(file)
      })
    })
  })

- Maifee Ul Asad

Answer 3

由于您允许用户上传文件，因此您已经将文件作为File对象。

但是，如果您想将其转换为Blob以进行一些编辑并将其转换回File对象，则可以使用File()构造函数将Blob转换为File。

const file = new File([blob], "imagename.png");

另外，请注意，File()构造函数接受Blob数组作为参数，而不是单个Blob。

- Samu

---

我不需要上传到另一个模块。我从数据库中获取数据，因此包括文件在内的任何本地项目都已经不存在了。我不需要它成为二进制大对象（blob）。我猜可以通过将URL转换为二进制大对象，然后再将其转换为文件来解决问题，但我想应该有更直接的方法。 - Travinns