如何在 react.js 中实现 jszip

本文介绍了如何在 react.js 中实现 jszip的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我试图在通过 http 请求发送之前压缩文件列表.但我卡在这里了.

I am trying to zip a list of files before sending out through the http request. But I got stuck here.

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

Basically, the function takes in a list of files and tries to zip them into one single .zip file. But when i send it out as formed data, it gave the error that the submitted data was not a file.

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

I checked the payload in the header and the target field is as [object Promise]. How do I to truly return a .zip file?

现在我可以在 Redux-saga 中捕获 zip 文件，但是当我将它保存在我的数据库中时它没有提供扩展名，而是只提供名称为blob".

Now I am able to catch the zip file in Redux-saga but it doesn't give an extension when I saved it in my database, instead it only give the name as 'blob'.

saga.js

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

推荐答案

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

Whats happening is that .generateAsync is returning a promise. You will have to wait until the promise is either fulfilled or rejected before being able to work with the data.

Promises 是 JS 中处理异步操作时的核心概念.您可以在此处阅读有关承诺的更多信息

Promises is a core concept in JS when working with async operations. You can read more about promises here

import zipTargetFiles from '/path'

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

这篇关于如何在 react.js 中实现 jszip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！