如何在javascript中转换dataURL到file object?[副本]

hivapdat  于 2023-05-21  发布在  Java
关注(0)|答案(6)|浏览(232)

此问题已在此处有答案

Convert Data URI to File then append to FormData(14个答案)
昨天关门了。
我需要在Javascript中将dataURL转换为File对象,以便使用 AJAX 发送它。这可能吗?如果是,请告诉我如何。

wsxa1bj1

wsxa1bj11#

如果你需要 AJAX 发送它,那么就不需要使用File对象,只需要BlobFormData对象。
正如我所指出的,为什么不通过 AJAX 将base64字符串发送到服务器,并将其转换为二进制服务器端,例如使用PHP的base64_decode?无论如何,来自this answer的标准兼容代码可以在Chrome 13和WebKit Nightlies中工作:

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    //Old Code
    //write the ArrayBuffer to a blob, and you're done
    //var bb = new BlobBuilder();
    //bb.append(ab);
    //return bb.getBlob(mimeString);

    //New Code
    return new Blob([ab], {type: mimeString});

}

然后将blob附加到一个新的FormData对象,并使用 AJAX 将其发布到服务器:

var blob = dataURItoBlob(someDataUrl);
var fd = new FormData(document.forms[0]);
var xhr = new XMLHttpRequest();

fd.append("myFile", blob);
xhr.open('POST', '/', true);
xhr.send(fd);
bzzcjhmw

bzzcjhmw2#

BlobBuilder已弃用,不应再使用。使用Blob代替旧的BlobBuilder。代码非常干净和简单。
File对象继承自Blob对象。您可以在FormData对象中使用这两种方法。

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

使用dataURLtoBlob()函数将dataURL转换为blob并 AJAX 发送到服务器。
例如:

var dataurl = 'data:text/plain;base64,aGVsbG8gd29ybGQ=';
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("file", blob, "hello.txt");
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server.php', true);
xhr.onload = function(){
    alert('upload complete');
};
xhr.send(fd);

另一种方式:

您也可以使用fetch将url转换为文件对象(文件对象具有name/fileName属性,这与blob对象不同)
代码很短,易于使用。(works in Chrome and Firefox)

//load src and convert to a File instance object
//work for any type of src, not only image src.
//return a promise that resolves with a File instance

function srcToFile(src, fileName, mimeType){
    return (fetch(src)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], fileName, {type:mimeType});})
    );
}

使用示例1:只是转换为文件对象

srcToFile(
    'data:text/plain;base64,aGVsbG8gd29ybGQ=',
    'hello.txt',
    'text/plain'
)
.then(function(file){
    console.log(file);
})

使用示例2:转换为文件对象并上传到服务器

srcToFile(
    'data:text/plain;base64,aGVsbG8gd29ybGQ=',
    'hello.txt',
    'text/plain'
)
.then(function(file){
    console.log(file);
    var fd = new FormData();
    fd.append("file", file);
    return fetch('/server.php', {method:'POST', body:fd});
})
.then(function(res){
    return res.text();
})
.then(console.log)
.catch(console.error)
;
1tuwyuhd

1tuwyuhd3#

要从dataURL创建blob,请执行以下操作:

const response = await fetch(dataURL);
const blob = await response.blob();

要从blob创建文件,请执行以下操作:

const file = new File(
  [blob],
  "fileName.jpg",
  {
    type: "image/jpeg",
    lastModified: new Date()
  }
);
hgb9j2n6

hgb9j2n64#

如果您真的想将dataURL转换为File对象。
您需要将dataURL转换为Blob,然后将Blob转换为File。这个函数来自Matthew的回答。(https://stackoverflow.com/a/7261048/13647044

function dataURItoBlob(dataURI) {
      // convert base64 to raw binary data held in a string
      // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
      var byteString = atob(dataURI.split(',')[1]);

      // separate out the mime component
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

      // write the bytes of the string to an ArrayBuffer
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeString });
    }

const blob = dataURItoBlob(url);
const resultFile = new File([blob], "file_name");

除此之外,您可以初始化File Object上的选项。Reference到File()构造函数。

const resultFile = new File([blob], "file_name",{type:file.type,lastModified:1597081051454});

类型应为[MIME][1]类型(即image/jpeg),在我的示例中最后修改的值相当于Mon Aug 10 2020 19:37:31 GMT+0200 (Eastern European Standard Time)

aemubtdh

aemubtdh5#

在最新浏览器中:

const dataURLtoBlob = (dataURL) => {
        fetch(dataURL)
            .then(res => res.blob())
            .then(blob => console.log(blob))
            .catch(err => console.log(err))
    }
0lvr5msh

0lvr5msh6#

经过一番研究,我得出了这个结论:

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var dw = new DataView(ab);
    for(var i = 0; i < byteString.length; i++) {
        dw.setUint8(i, byteString.charCodeAt(i));
    }
    // write the ArrayBuffer to a blob, and you're done
    return new Blob([ab], {type: mimeString});
}

module.exports = dataURItoBlob;

相关问题