将zip文件从reactjs上传到nodejs

Question

我正在建立一个传输文件网站，但我遇到了一个大问题！我正在研究 react.js express.js 和数字海洋空间。当我将文件拖到拖放区并点击提交时，该文件应该上传到数字海洋空间，就像 amazon s3。所以，现在我可以毫无问题地上传文件，但是，如果我可以在通过 Express 将文件发送到数字海洋之前将文件压缩到 React 上，那就更好了。这就是问题所在！我无法发送压缩文件！我已经用邮递员测试了一个 zip 文件的发送并且它有效，但是当我尝试使用 axios 从客户端发送它（反应）时没有任何反应。
请需要帮助:( 我已经搜索了 3 天如何让它工作但没有办法。非常感谢你们。

Upload.js 组件客户端（反应）：

export const upload = (form, callback = () => {}) => {

    const url = `${apiURL}/upload`;

    let files = _.get(form, 'files', []);

    let data = new FormData();

    const folderName = "upload";
    let zip = new JSZip();
    let content = zip.folder(folderName);

    _.each(files, (file) => {

        content.file(file);

    })            

    zip.generateAsync({type:"blob"}).then(function(blob) {           
        data.append('files', blob);
    });

    data.append('to', _.get(form, 'to'));
    data.append('from', _.get(form, 'from'));
    data.append('message', _.get(form, 'message'));

    const config = {

        onUploadProgress : (event) => {

            console.log('UPLOAD EVENT from Upload.js ', event);

            return callback({
                type : 'onUploadProgress',
                payload : event
            })
        }

    }

    axios.post(url, data, config).then((response) => {

        //upload success
        return callback({
            type : 'success',
            payload : response.data  
        })

    }).catch((err) => {
        return callback({
            type : 'error',
            payload : err
        })
    });
}

Answer 1

我终于找到了解决方案，我的方法可能是正确的，但同时这个在前端使用 JSZIP 的解决方案限制为 5Mo/file 并且它的大小非常差。因此，解决方案实际上是在服务器端（快速）发送每个文件的相对路径并将其存储在 MONGODB 上。之后，在下载文件时，我使用文件归档器压缩了我从数字海洋收到的文件，并将它们的相对路径直接放在 fileObject 的追加函数上。

这是代码：

class 文件存档器 {

constructor(app, files = [], response) {

    this.app = app;
    this.files = files;
    this.response = response;

}

download(){

    const app = this.app;
    const files = this.files;
    const response = this.response;
    let fullPath = null;
    //const uploadDir = app.get('storageDirectory');
    const zip = archiver('zip');

    response.attachment('download.zip');
    zip.pipe(response);

    const s3Downloader = new S3Download(app, response);

    _.each(files, (file) => {

        fullPath = _.get(file, 'fullPath');
        const fileObject = s3Downloader.getObject(file);
        if(fullPath === null || fullPath === ''){
            zip.append(fileObject, {name : _.get(file, 'originalName')});
        } else {
            zip.append(fileObject, {name : _.get(file, 'fullPath')}); //Here put the absolute path (relative path)
        }


    })

    zip.finalize();

    return this;
}

}

//导出模块 module.exports = { 文件存档器 }

将zip文件从reactjs上传到nodejs

upload zip file from reactjs to nodejs

node.js

express

jszip

reactjs

axios