如何在 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 文件中。但是当我把它作为形成的数据发送出去时，它给出了提交的数据不是文件的错误。

我检查了 header 中的有效负载，目标字段为 [object Promise]。我如何真正 return .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 中的一个核心概念。您可以阅读有关承诺的更多信息 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");
    });

如何在 react.js 中实现 jszip

How to implement jszip in react.js

javascript

api

promise

jszip

redux-saga