javascript - 创建一个包含数据 ur 的文件

Question

我有这样的东西。

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

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

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

Answer 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
  });
}

您可以在这段代码片段中看到它的工作原理，该代码片段获取一个数据 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>