用数据创建一个文件我需要这样的东西

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>