JS中将图片base64转file文件的两种方式

将图片base64转换成file文件可以使用两种方式：Blob对象和FormData对象。

使用Blob对象

我们可以使用Blob对象来创建一个File对象。File对象是对Blob对象的一个扩展。该方法包含以下步骤：

1. 将Base64字符串转换为Uint8Array数组
2. 使用Blob对象创建File对象

以下是实现的代码：

/**
 * 将图片的base64字符串转换成File对象
 * @param {string} base64 - base64字符串
 * @param {string} filename - 文件名
 * @return {File} file对象
 */
function dataURLtoFile(base64, filename) {
    const arr = base64.split(',');
    const typeMatch = arr[0].match(/:(.*?);/);
    const mime = typeMatch[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}

使用示例：

const base64 = 'data:image/png;base64,iVBORw0KGg......';
const file = dataURLtoFile(base64, 'example.png');
console.log(file);

使用FormData对象

我们可以使用FormData对象来将Base64字符串转换为File对象。FormData对象包含一个用于添加key-value数据的append方法。该方法第二个参数是用于表示文件数据的File对象，第三个参数是表示文件名的字符串。

以下是使用FormData对象实现的代码：

/**
 * 使用FormData将图片的base64字符串转换成File对象
 * @param {string} base64 - base64字符串
 * @param {string} filename - 文件名
 * @return {File} file对象
 */
function dataURLtoFileWithFormData(base64, filename) {
    const arr = base64.split(',');
    const typeMatch = arr[0].match(/:(.*?);/);
    const mime = typeMatch[1];

    const formData = new FormData();
    formData.append('file', dataURItoBlob(base64), filename);

    return formData.get('file');
}

/**
 * 将base64转换为Blob
 * @param {string} base64 - base64字符串
 * @return {Blob} Blob对象
 */
function dataURItoBlob(dataURI) {
    const byteString = atob(dataURI.split(',')[1]);
    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: mimeString });
}

使用示例：

const base64 = 'data:image/png;base64,iVBORw0KGg......';
const file = dataURLtoFileWithFormData(base64, 'example.png');
console.log(file);

请注意，这两种方法都需要将Base64字符串转换为Blob对象。第二种方法使用FormData对象，其更受欢迎，因为他是一种用于构建表单数据的技术，更为简洁易懂。