如何在JavaScript中将Blob转换为File

Question

我需要将一张图片上传到NodeJS服务器上的某个目录。为此，我使用了connect-busboy节点模块。

我有这张图片的dataURL，并使用以下代码将其转换为Blob：

dataURLToBlob: function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);
        return new Blob([raw], {type: contentType});
    }
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
}

我需要一种将blob转换为文件以上传图像的方法。

有人可以帮我吗？

- skip

---

文件就是二进制大对象(Blobs)，只需添加元数据属性，即可开始使用。 - dandavis

上传blob时的默认值为“blob”。因此，我首先提取了我要裁剪的文件的名称，然后通过执行form.append（“blob”，blob，filename）;并给出相同的“filename”来将裁剪后的文件上传到服务器。 - skip

@skip 我下面的回答有帮到您吗？如果是的话，请将其标记为正确答案。 - FiniteLooper

Answer 1

您可以使用File构造函数：

var file = new File([myBlob], "name");

根据w3规范，这将把blob包含的字节附加到新File对象的字节中，并使用指定的名称创建该文件。 http://www.w3.org/TR/FileAPI/#dfn-file

- Joshua P Nixon

---

这就是我一直在寻找的，唯一的区别是第一个参数实际上是一个数组，所以我使用它：var file = new File([myBlob], "name"); - Michaeldcooney

是的，我也在寻找这个解决方案。Stamplay服务器无法从blob对象中获取文件名。因此，我需要将其转换回文件。但Safari不支持文件API...现在又回到了0。 - Hugh Hou

在PhantomJS中，文件构造函数无法使用，例如： TypeError: FileConstructor不是一个构造函数（在执行“new File(['']，'file.pdf'，{'size':1000，'type':'application/pdf'})”时）。 - bkimminich

目前（2017-10-04），Edge 存在一个 bug，防止使用该构造函数。https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9551546/ - Rik Martins

请务必添加文件类型，否则可能无法正常工作。新的文件([myBlob], "name", { type: "image/jpeg", }); - BernardA

Answer 2

这个函数将 Blob 转换成 File，对我非常有效。

原生 JavaScript

function blobToFile(theBlob, fileName){
  //A Blob() is almost a File() - it's just missing the two properties below which we will add
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
}

TypeScript（带有适当的类型）

public blobToFile = (theBlob: Blob, fileName:string): File => {
  const b: any = theBlob;
  //A Blob() is almost a File() - it's just missing the two properties below which we will add
  b.lastModifiedDate = new Date();
  b.name = fileName;
    
  //Cast to a File() type
  return theBlob as File;
}

用法

const myBlob = new Blob();

//do stuff here to give the blob some data...

const myFile = blobToFile(myBlob, "my-image.png");

- FiniteLooper

---

我认为应该先进行类型转换，这样你就不需要在 TypeScript 中使用 any。请参考此示例。 - styfle

这不适用于所有目的。将这个“文件”添加到ajax调用中不会正确设置文件名。 - Jacob Poul Richardt

这并不是一个好的解决方案，生成的对象仍然是一个模糊的块状物。 - czupe

只需添加 b.__proto__ = File.prototype，你的解决方案就会成为一个梦想，即使是 b instanceOf File 也会被欺骗成 true。 - manuelnaranjo

这个答案不应该被接受，https://dev59.com/G14d5IYBdhLWcg3wHPc9#53205768 或 https://dev59.com/G14d5IYBdhLWcg3wHPc9#31663645 应该被选为答案。 - Kira

Answer 3

Joshua P Nixon的答案是正确的，但我还需要设置最后修改日期。所以这里是代码。

Joshua P Nixon的回答是正确的，但我需要同时设置最后修改日期。以下是代码。

var file = new File([blob], "file_name", {lastModified: 1534584790000});

1534584790000是一个Unix时间戳，表示"GMT：2018年8月18日上午9:33:10星期六"。

- mili

---

不破坏 instanceof 的技巧如下，与被接受的答案相同。 - Matt Jensen

顺便提一下，如果有人不想硬编码它是在2018年8月最后修改的，可以随时放置 lastModified: Date.now()，这将返回当前时间（以毫秒为单位）！（就像给出的示例一样，它是2018年8月18日9:33:10的毫秒数） - Raphael Morgan

Answer 4

Typescript

public blobToFile = (theBlob: Blob, fileName:string): File => {       
    return new File(
        [theBlob as any], // cast as any
        fileName, 
        {
            lastModified: new Date().getTime(),
            type: theBlob.type 
        }
    )
}

Javascript

function blobToFile(theBlob, fileName){       
    return new File([theBlob], fileName, { lastModified: new Date().getTime(), type: theBlob.type })
}

输出

File {name: "fileName", lastModified: 1597081051454, lastModifiedDate: Mon Aug 10 2020 19:37:31 GMT+0200 (Eastern European Standard Time), webkitRelativePath: "", size: 601887, …}
lastModified: 1597081051454
lastModifiedDate: Mon Aug 10 2020 19:37:31 GMT+0200 (Eastern European Standard Time) {}
name: "fileName"
size: 601887
type: "image/png"
webkitRelativePath: ""
__proto__: File

- Hossam EL-Kashef

Answer 5

为了让我工作，我必须明确地提供类型，尽管它被包含在 blob 中，这样做：

const file = new File([blob], 'untitled', { type: blob.type })

- Alexandre Daubricourt

Answer 6

我的现代变体：

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

- DAVID _

---

要在生成的文件中添加文件名，请使用以下代码：fd.set('a', blobData, '文件名')。 - joaoguerravieira

当 fd.set 时，在一些 IOS 设备上会失败。 - Sing

我必须添加带有扩展名的文件名才能使其正常工作。例如：fd.set('a', blobData, 'filename.jpg') - Rick

Answer 7

var blob = new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" });

var file = new File([blob], "name.txt");

现在你可以上传 .txt 文件

- Ronald Babu

Answer 8

这个问题困扰了我好几个小时。我正在使用Nextjs，尝试将画布转换为图像文件。

我使用了另一个人的解决方案，但创建的文件是空的。

因此，如果这也是你的问题，你应该在文件对象中提到大小属性。

new File([Blob], `my_image${new Date()}.jpeg`, {
  type: "image/jpeg",
  lastModified: new Date(),
  size: 2,
});

只需添加键，值并不重要。

- Sajad Saderi

---

大小不是一个有效的选项。 - Endless

不起作用啊兄弟！！Blob 实际上是对象对吧？ - Agni Gari

Answer 9

我已经使用 FileSaver.js 将 blob 保存为文件。

这是存储库 : https://github.com/eligrey/FileSaver.js/

用法:

import { saveAs } from 'file-saver';

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

saveAs("https://httpbin.org/image", "image.jpg");

- mylnz

---

这并不回答问题。 - Endless

他要求转换文件而不是保存文件。 - Hossam EL-Kashef