Base64编码转为文件

在JavaScript中，将Base64编码的字符串转换为文件通常涉及几个步骤。这通常涉及到创建一个Blob对象，然后使用这个Blob对象来创建一个文件。以下是一个简单的示例，说明如何将Base64字符串转换为文件：

javascript
function base64ToBlob(base64Data, contentType) {
const sliceSize = 1024;
const byteCharacters = atob(base64Data);
const byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {  
    const slice = byteCharacters.slice(offset, offset + sliceSize);  

    const byteNumbers = new Array(slice.length);  
    for (let i = 0; i < slice.length; i++) {  
        byteNumbers[i] = slice.charCodeAt(i);  
    }  

    const byteArray = new Uint8Array(byteNumbers);  
    byteArrays.push(byteArray);  
}  

const blob = new Blob(byteArrays, {type: contentType});  
return blob;  

}

function base64ToFile(base64Data, fileName, contentType = ‘application/octet-stream’) {
const blob = base64ToBlob(base64Data, contentType);
const file = new File([blob], fileName, { type: contentType });
return file;
}

// 使用示例
const base64String = ‘data:image/png;base64,iVBORw0KG…’; // 你的Base64字符串
const fileName = ‘example.png’; // 你想要的文件名
const contentType = ‘image/png’; // 文件的内容类型

const file = base64ToFile(base64String.split(‘,’)[1], fileName, contentType);

// 现在你可以使用这个文件对象，比如通过表单上传，或者通过URL.createObjectURL来预览图片等。

// 示例：创建图片的URL
const imageUrl = URL.createObjectURL(file);

// 在浏览器中显示图片
const imgElement = document.createElement(‘img’);
imgElement.src = imageUrl;
document.body.appendChild(imgElement);

// 清理URL资源
imgElement.onload = function() {
URL.revokeObjectURL(imageUrl);
};
在这个示例中，
base64ToBlob
函数将Base64字符串转换为一个Blob对象，而
base64ToFile
函数则进一步将这个Blob对象封装成一个File对象。File对象通常用于表示用户选择的文件，但也可以在这里用来表示从Base64字符串创建的文件。

请注意，Base64字符串通常包含数据URI方案的前缀（例如
data:image/png;base64,
），因此在传递给
base64ToFile
函数之前，你需要通过
split(‘,’)[1]
去掉这个前缀。

最后，通过
URL.createObjectURL
方法，你可以创建一个指向Blob或File对象的URL，这个URL可以直接用于在

元素中显示图片，或者用于其他需要文件URL的场景。记住在图片加载完成后调用
URL.revokeObjectURL
来释放资源。