看起来你在WebCrypto实现大文件流式加解密的路上踩了两个连环坑：先是解密下载后文件直接变成0字节，好不容易修复后大文件又抛出OperationError，我来帮你拆解问题根源和落地的解决办法。

第一个坑：下载文件0字节的原因 #

你最初的解密函数里，第一步用await reader.read()读取文件头（盐+IV），但这里有个致命问题：

• 加密时你把盐（16字节）和IV（16字节）直接拼在了加密数据的最前面，组成了最终的Blob。
• 当下载后读取这个Blob时，第一次read()拿到的value可能不止32字节（比如加密文件比较大，第一个chunk包含了盐+IV+部分加密数据）。
• 你只从这个value里提取了前32字节当盐和IV，完全丢弃了后面跟着的加密数据开头部分，而如果加密文件很小，第一次read()就把整个文件读完了，后续的reader.read()会直接返回done: true，导致decryptedChunks是空数组，最终生成的Blob自然是0字节。

第二个坑：大文件抛出OperationError的原因 #

你更新解密函数后手动传入盐和IV，小文件能正常工作，但大文件报错，核心原因是AES-CBC的加密规则限制：

• AES-CBC是块加密算法，每个加密块固定16字节。WebCrypto的subtle.decrypt要求：除了最后一个包含PKCS7填充的块，前面所有的密文块必须是16字节的整数倍。
• 你流式读取大文件时，每次read()返回的chunk大小是浏览器自动决定的（不一定是16的整数倍），直接把这种非对齐的chunk丢给decrypt，就会触发OperationError。

针对性解决办法 #

1. 先改掉「盐+IV嵌入加密文件」的设计

把盐和IV作为独立的元数据存储（比如上传时和文件名一起存在服务器数据库，或者拼在文件名里），不要和加密数据混在一起，这样解密时可以先拿到盐和IV，再单独下载加密文件，彻底避免文件头读取的混乱。

2. 用「缓冲区+TransformStream」实现流式解密

通过维护一个数据缓冲区，积累读取到的chunk，直到凑够完整的16字节块再解密，最后处理包含填充的最后一块，完美解决块对齐问题。

完整可运行代码 #

客户端加密逻辑（分离盐和IV）

// 从密码派生AES密钥
async function deriveKey(password, salt) {
    const enc = new TextEncoder();
    const keyMaterial = await window.crypto.subtle.importKey(
        'raw',
        enc.encode(password),
        'PBKDF2',
        false,
        ['deriveKey']
    );

    return window.crypto.subtle.deriveKey(
        {
            name: 'PBKDF2',
            salt: salt,
            iterations: 100000,
            hash: 'SHA-256',
        },
        keyMaterial,
        { name: 'AES-CBC', length: 256 },
        false,
        ['encrypt', 'decrypt']
    );
}

// 生成随机IV
function generateIV() {
    return crypto.getRandomValues(new Uint8Array(16));
}

// 流式加密文件，返回加密Blob+盐+IV（方便传输存储）
async function encryptFile(file, password) {
    const salt = crypto.getRandomValues(new Uint8Array(16));
    const iv = generateIV();
    const key = await deriveKey(password, salt);

    // 用TransformStream实现流式加密，低内存占用
    const encryptStream = new TransformStream({
        async transform(chunk, controller) {
            const encryptedChunk = await crypto.subtle.encrypt(
                { name: 'AES-CBC', iv },
                key,
                chunk
            );
            controller.enqueue(new Uint8Array(encryptedChunk));
        }
    });

    // 把文件流通过加密流，转成Blob
    const encryptedStream = file.stream().pipeThrough(encryptStream);
    const reader = encryptedStream.getReader();
    const encryptedChunks = [];
    let done = false;
    while (!done) {
        const { value, done: isDone } = await reader.read();
        if (value) encryptedChunks.push(value);
        done = isDone;
    }

    return {
        encryptedBlob: new Blob(encryptedChunks, { type: 'application/octet-stream' }),
        salt: Array.from(salt), // 转数组方便传输
        iv: Array.from(iv)
    };
}

客户端解密逻辑（流式处理+块对齐）

// 流式解密文件，需传入加密Blob、密码、盐数组、IV数组
async function decryptFile(encryptedBlob, password, saltArray, ivArray) {
    if (!encryptedBlob) throw new Error('No encrypted file provided.');
    console.log('Encrypted Blob size:', encryptedBlob.size);

    const salt = new Uint8Array(saltArray);
    const iv = new Uint8Array(ivArray);
    const key = await deriveKey(password, salt);
    const blockSize = 16; // AES-CBC固定块大小

    // 用TransformStream实现流式解密，维护缓冲区确保块对齐
    const decryptStream = new TransformStream({
        start(controller) {
            this.buffer = new Uint8Array(0); // 存储未对齐的剩余数据
        },
        async transform(chunk, controller) {
            // 合并新chunk到缓冲区
            const combined = new Uint8Array(this.buffer.length + chunk.length);
            combined.set(this.buffer);
            combined.set(chunk, this.buffer.length);
            this.buffer = combined;

            // 计算可解密的完整块数量
            const fullBlocks = Math.floor(this.buffer.length / blockSize);
            if (fullBlocks > 0) {
                const fullData = this.buffer.slice(0, fullBlocks * blockSize);
                this.buffer = this.buffer.slice(fullBlocks * blockSize); // 保留未对齐的剩余数据

                const decrypted = await crypto.subtle.decrypt(
                    { name: 'AES-CBC', iv },
                    key,
                    fullData
                );
                controller.enqueue(new Uint8Array(decrypted));
            }
        },
        async flush(controller) {
            // 处理最后一块（包含PKCS7填充）
            if (this.buffer.length > 0) {
                const decrypted = await crypto.subtle.decrypt(
                    { name: 'AES-CBC', iv },
                    key,
                    this.buffer
                );
                controller.enqueue(new Uint8Array(decrypted));
            }
        }
    });

    // 把加密Blob流通过解密流，转成明文Blob
    const decryptedStream = encryptedBlob.stream().pipeThrough(decryptStream);
    const reader = decryptedStream.getReader();
    const decryptedChunks = [];
    let done = false;
    while (!done) {
        const { value, done: isDone } = await reader.read();
        if (value) decryptedChunks.push(value);
        done = isDone;
    }

    return new Blob(decryptedChunks, { type: 'application/octet-stream' });
}

上传下载交互逻辑

// 上传按钮绑定
document.getElementById('uploadButton').addEventListener('click', async () => {
    const fileInput = document.getElementById('fileInput');
    const uploadStatus = document.getElementById('uploadStatus');
    const password = prompt('Enter a password to encrypt the file:');

    if (!fileInput.files.length || !password) {
        uploadStatus.textContent = 'Please select a file and enter a password.';
        return;
    }

    const file = fileInput.files[0];
    uploadStatus.textContent = 'Encrypting file...';

    try {
        const { encryptedBlob, salt, iv } = await encryptFile(file, password);
        uploadStatus.textContent = 'Uploading file...';

        // 构建FormData，把加密文件、盐、IV一起传给服务器
        const formData = new FormData();
        formData.append('file', encryptedBlob, file.name);
        formData.append('salt', JSON.stringify(salt));
        formData.append('iv', JSON.stringify(iv));

        // 发送上传请求（请替换成你的后端接口）
        const res = await fetch('/upload', {
            method: 'POST',
            body: formData
        });

        if (res.ok) {
            uploadStatus.textContent = 'File uploaded successfully!';
        } else {
            uploadStatus.textContent = 'Upload failed.';
        }
    } catch (err) {
        uploadStatus.textContent = `Error: ${err.message}`;
        console.error(err);
    }
});

// 下载按钮绑定
document.getElementById('downloadButton').addEventListener('click', async () => {
    const filename = document.getElementById('downloadFilename').value;
    const password = prompt('Enter the decryption password:');

    if (!filename || !password) {
        alert('Please enter filename and password.');
        return;
    }

    try {
        // 1. 先获取文件的盐和IV元数据（请替换成你的后端接口）
        const metaRes = await fetch(`/file-meta?filename=${filename}`);
        const { salt, iv } = await metaRes.json();

        // 2. 下载加密文件（请替换成你的后端接口）
        const fileRes = await fetch(`/download?filename=${filename}`);
        const encryptedBlob = await fileRes.blob();

        // 3. 解密文件
        const decryptedBlob = await decryptFile(encryptedBlob, password, salt, iv);

        // 4. 触发浏览器下载
        const a = document.createElement('a');
        a.href = URL.createObjectURL(decryptedBlob);
        a.download = filename;
        a.click();
        URL.revokeObjectURL(a.href);
    } catch (err) {
        alert(`Download/decrypt failed: ${err.message}`);
        console.error(err);
    }
});

关键说明 #

1. 元数据分离：加密时把盐和IV单独提取，上传下载时独立传输，彻底避免了文件头读取的混乱，从根源解决0字节文件问题。
2. 块对齐处理：解密时用缓冲区积累数据，只解密完整的16字节块，最后处理包含填充的末尾块，完美解决大文件的OperationError。
3. 流式优化：用TransformStream实现流式加解密，内存占用极低，支持任意大小的文件。

备注：内容来源于stack exchange，提问作者Samor1922