upload zip file from reactjs to nodejs

问题

I'm building a transfer files website and I'm facing a big issue ! I'm working with react.js express.js and digital ocean spaces. When I drag the file to the drop zone and hit submit, the file is supposed to be uploaded on digital ocean spaces, it's like amazon s3. So, now I'm able to upload a file without any problem but, it would be much more if I can zip the file on react before sending it to digital ocean via Express. And here is the problem ! I'm not able to send a zipped file ! I have already tested the send of a zip file with postman and it works, but when I try to send it from the client (react) using axios nothing happen.
Please need help :( It's been 3 days that I'm searching how to make it working but no way. Thank you so much guys.

Upload.js component client (react) :

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
        })
    });
}

回答1:

Finally I found the solution, my approach maybe was right but at the same time this solution that uses JSZIP on the front side is limited to 5Mo/file and it's very poor as size. So, the solution was in fact to send the relative path of every file on the server side (express) and store it on MONGODB. after that, when it come to download the file I used file archiver to zip the files that I received from digital ocean putting their relative path directly on the append function of the fileObject.

Here is the code :

class FileArchiver {

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;
}

}

//Export modules module.exports = { FileArchiver }

来源：https://stackoverflow.com/questions/60803367/upload-zip-file-from-reactjs-to-nodejs