React-Native（或JS）解码Base64为ZIP文件

Question

赏金将在 5 天后到期。 此问题的答案有资格获得+100声望赏金。 impression7vx正在寻找可靠来源的答案。

我正在开发一个[试图]优化在 AWS 中存储图像和视频的应用程序，同时还考虑数据的检索。

我分 2 个步骤执行此操作： A. 将数据存储到 AWS & B. 从 AWS 检索数据。 我正在尝试解决的当前问题存在于B: Step 3中。 我无法将 Base64 正确解码为 Zip 文件。

答：我将数据存储在一个 6 步过程中，以确保数据尽可能地被压缩（节省成本）和加密，以便只有用户才能访问它（加密）。

1. 从用户获取图像/视频
   原因：用户数据选择

import { launchImageLibrary } from 'react-native-image-picker';
launchImageLibrary(options, (response) => {
    if(response.assets) {
        const assets = response.assets;
        completeCallback(assets);
    }
    else if(response.errorCode) {
        const message = response.errorMessage;
        console.log(message);
    }
    else {
        cancelCallback();
    }
});

2. 将图像从原始位置存储到文档目录中
   原因：综合定位到Zip

static async copyFilesToDocumentDirectory(urls) {
    var path = `${RNFS.DocumentDirectoryPath}/media`;
    let existDir = await RNFS.exists(RNFS.DocumentDirectoryPath + '/media').then(boolean => boolean);
    if(!existDir) { RNFS.mkdir(path); };
    return Promise.all(urls.map(url => {
        return RNFS.exists(url)
            .then((status) => {
                if(status) {
                    var filename = url.substring(url.lastIndexOf('/')+1);
                    var newPath = path + "/" + filename;
                    return RNFS.copyFile(url, newPath);
                };
            });
    }));
};

3. Zip 上传文件
   原因：应该减小文件大小，但不一定适用于所有情况

static zipDocumentDirectory = async () => {
    var sourcePath = `${RNFS.DocumentDirectoryPath}/media`;
    var targetPath = `${RNFS.DocumentDirectoryPath}/myFile.zip`;
        
    return await zip(sourcePath, targetPath);
}

4. 将 Zip 编码为 base64
   编码数据以便我可以加密它

AWS.getPresignedURLPut(DBKey, passCode, 
    async (url) => {
        await RNFS.readFile(zipURI, 'base64')
        .then(res => {
                // Next Section
                ...
        }, (err) => {
            console.log(`Err: ${err}`)
        }
    );

5. 加密base64
   原因：端到端加密

const encryptedData = CryptoJS.AES.encrypt(res, ENKey).toString();
const json =
{
    'DBKey': DBKey,
    'PassCode': passCode,
    'base64data': encryptedData
};
// Store data in Next Section

6. 存储在数据库中
   原因：数据库存储

AWS.storeJSONToAWSS3PresignedURL(json, url, onComplete);

---

B.我以相同的方式检索数据，只是顺序相反。

1. 从数据库中检索加密的 Base64
   原因：获取原始数据

AWS.getJSONFromAWSS3PresignedURL(url); //returns Base64 String

2. 解密为原始 Base64
   原因：需要获取原始Base64

/* Decryption */
const bytes = CryptoJS.AES.decrypt(data, endToEndEncryptionKey)
originalBase64 = bytes.toString(CryptoJS.enc.Utf8);

3. 将 Base64 解码为 Zip 文件问题
   原因：需要包含视频/照片的原始 Zip 文件

static writeBase64ToDocumentDirectory = async (base64) => {
    var path = `${RNFS.DocumentDirectoryPath}/myFile.zip`;
    const blob = b64toBlob(base64);
    const file = new File([blob], path, { type: 'application/x-zip-compressed' });
    console.log(`F:`);
    console.log(file);
    console.log(`B:`);
    console.log(blob);
};

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
    const byteCharacters = global.atob(b64Data);
    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;
}

/*
F:
{"_data": {"__collector": {}, "blobId": "9341bc78-11e7-428c-96c4-e761dc47f75a", "lastModified": undefined, "name": "/var/mobile/Containers/Data/Application/986B087C-A19A-4DDA-9180-831B4EDE89B9/Documents/myFile.zip", "offset": 0, "size": 1948698, "type": "application/x-zip-compressed"}}

B:
{"_data": {"__collector": {}, "blobId": "66b4e283-5a26-4684-a6f7-49f3615c8509", "lastModified": undefined, "offset": 0, "size": 1948698, "type": ""}}
*/

4. 最后一步是解压缩文件，但它不存在。

await RNFS.readDir(`${RNFS.DocumentDirectoryPath}`)
.then((result) => {
    console.log(`Zip Path: ${result} -- ${result.length}`);
    console.log(result);
});

/*
Zip Path:  -- 0
[]
*/

问题：我似乎找不到将 base64 转换为解码的 zip 文件的方法。

工作验证：我知道这可以工作，因为我可以使用这个网站解码 base64。 但是，我无法重现代码以在设备本地执行相同的操作。

Answer 1

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
    const byteCharacters = global.atob(b64Data);
    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;
};

将 Base64 字符串转换为 Blob 后，您可以使用 File 构造函数和 react-native-fs 库中的 writeFile 方法将 Blob 写入文件。