创建一个包含数据 ur 的文件答案

【问题标题】：Create a file with data ur创建一个包含数据 ur 的文件
【发布时间】：2015-09-30 11:28:00
【问题描述】：

我有这样的东西。

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACkCAYAAAAZtYVBAAAgAElEQ…TFHIWRhe2sii/S5zA+N/ZF6gI+RiSKspPUBiI1UQf9/wDVxYvlSggfZqgAAAABJRU5Erkaa==="

有没有办法创建一个文件对象？有这个吗？

我看到了URL.createObjectURl 方法，但它似乎需要创建一个blobl 对象，我真的不知道如何。

【问题讨论】：

查找“dataurl 到 blob”；文件只是 Blob...

标签： javascript file blob

【解决方案1】：

以下函数会将数据 URI 转换为 blob。

function dataURIToBlob(dataURI) {
  // Split the dataUri up into parts
  // data:[<mediatype>][;<charset>],(data)
  var parts = /data:([^;]+)(?:;([^,]+))?,(.+)/.exec(dataURI),
      mime        = parts[1],
      charset     = parts[2] || 'charset=US-ASCII',
      encodedData = parts[3];

  var data;
  if (charset === 'base64') {
    // If base64 convert to a Uint8 clamped array of character codes
    var decodedData = atob(encodedData);
    data = new Uint8Array(decodedData.length);
    for (var i = 0; i < decodedData.length; i++) {
      data[i] = decodedData.charCodeAt(i);
    }
  } else {
    data = decodeURIComponent(encodedData);
  }

  return new Blob([data], {
    type: mime
  });
}

你可以看到它在这个 sn-p 中工作，它接受一个数据 URI，将它转换为一个 blob，然后创建一个你可以用来访问文件的 blob URI。提供了示例图像和 CSV 文件。

testData = {};
testData['image/gif'] = 'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7';
testData['text/csv'] = 'data:text/csv;charset=utf-8,ID%2CScore%2CAssignee%2CCreated%2CComment%0Aid_value0%2Cscore_value0%2Cassignee_value0%2Ccreated_value0%2Ccomment_value0%0Aid_value1%2Cscore_value1%2Cassignee_value1%2Ccreated_value1%2Ccomment_value1%0Aid_value2%2Cscore_value2%2Cassignee_value2%2Ccreated_value2%2Ccomment_value2%0A';

function dataURIToBlob(dataURI) {
  // Split the dataUri up into parts
  // data:[<mediatype>][;<charset>],(data)
  var parts = /data:([^;]+)(?:;([^,]+))?,(.+)/.exec(dataURI),
      mime        = parts[1],
      charset     = parts[2] || 'charset=US-ASCII',
      encodedData = parts[3];
  
  var data;
  if (charset === 'base64') {
    // If base64 convert to a Uint8 clamped array of character codes
    var decodedData = atob(encodedData);
    data = new Uint8Array(decodedData.length);
    for (var i = 0; i < decodedData.length; i++) {
      data[i] = decodedData.charCodeAt(i);
    }
  } else {
    data = decodeURIComponent(encodedData);
  }
  
  return new Blob([data], {
    type: mime
  });
}

function createBlobURI() {
  var blob = dataURIToBlob(dataURIInput.value);
  var blobURI = URL.createObjectURL(blob);
  blobURIAnchor.href = blobURI;
  blobURIAnchor.innerHTML = blobURI;
  blobURIAnchor.style.display = 'block';
  blobURIAnchor.download = 'blob.' + blob.type.split('/')[1];
}

function insertTestData(mime) {
  dataURIInput.value = testData[mime];
}

insertTestData('image/gif');

<button onclick="insertTestData('image/gif')">Image test</button>
<button onclick="insertTestData('text/csv')">CSV test</button>
<input id="dataURIInput" type="text"/>
<button onclick='createBlobURI()'>Create blob URI</button>
<a id="blobURIAnchor" href="#" style="display:none"></a>

【讨论】：