如何在 react.js 中实现 jszip

Question

我正在尝试在通过 http 请求发送之前压缩文件列表。但我被困在这里。

export default function zipTargetFiles(files) {
    if (files.length <= 1) {
        return files;
    } else {
        const zip = require('jszip')();
        for (let i = 0; i < files.length; i++) {
            zip.file(files[i].name, files[i]);
    }
    return zip.generateAsync({type:"blob"});
}

}

基本上，该函数接收文件列表并尝试将它们压缩到一个单独的 .zip 文件中。但是当我将它作为形成的数据发送出去时，它给出了提交的数据不是文件的错误。

我检查了标头中的有效负载，目标字段为[object Promise]。如何真正返回 .zip 文件？

现在我可以在 Redux-saga 中捕获 zip 文件，但是当我将其保存在我的数据库中时它没有给出扩展名，而是只给出了名称为“blob”。

saga.js

const file = yield call(zipTargetFiles, files);
const formData = new FormData();
formData.append("coversheet", file);
const reponse = yield call(apiRequest, formData);

Answer 1

发生的事情是.generateAsync 正在返回一个承诺。您必须等到承诺被履行或被拒绝后才能使用数据。

Promises 是 JS 在处理异步操作时的核心概念。你可以阅读更多关于 Promise 的内容here

import zipTargetFiles from '/path'

zipTargetFiles( data ).then(file => {
 // Access your file here
})

Answer 2

要下载并命名 .zip 文件夹，您需要来自 file-saver 的 saveAs()

import { saveAs } from "file-saver";

  zip
    .generateAsync({
      type: "blob"
    })
    .then(content => {
      saveAs(content, "fileName.zip");
    });