将zip文件从reactjs上传到nodejs [英] upload zip file from reactjs to nodejs

问题描述

我正在建立一个传输文件网站，并且面临着一个大问题！ 我正在使用react.js express.js和数字海洋空间. 当我将文件拖到放置区并单击提交"时，该文件应该被上传到数字海洋空间中，就像亚马逊的s3一样. 因此，现在我可以上传文件了，没有任何问题，但是如果我可以将文件压缩后通过Express将其发送到Digital Ocean，则可以做得更多.这就是问题所在！我无法发送压缩文件！我已经用邮递员测试了zip文件的发送，并且可以正常工作，但是当我尝试使用axios从客户端(反应)发送zip文件时，没有任何反应.
请需要帮助:(已经3天了，我正在寻找如何使其正常工作，但没有办法. 非常感谢你们.

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组件客户端(反应):

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

推荐答案

最后，我找到了解决方案，我的方法也许是正确的，但与此同时，在正面使用JSZIP的该解决方案仅限于5Mo/file，尺寸非常差.因此，解决方案实际上是在服务器端发送每个文件的相对路径(表达)并将其存储在MONGODB上.之后，在下载文件时，我使用文件存档器压缩了我从数字海洋收到的文件，并将它们的相对路径直接放在fileObject的append函数上.

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.

这是代码:

FileArchiver类{

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

}

//导出模块 module.exports = { FileArchiver }

//Export modules module.exports = { FileArchiver }

这篇关于将zip文件从reactjs上传到nodejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！