将SailsJS后端的zip文件传输到React Redux前端

Question

I have a SailsJS Backend where i generate a zip File, which was requested by my Frontend, a React App with Redux. I'm using Sagas for the Async Calls and fetch for the request. In the backend, it tried stuff like:

//zipFilename is the absolute path 
res.attachment(zipFilename).send();

or

res.sendfile(zipFilename).send();

or

res.download(zipFilename)send();

or pipe the stream with:

const filestream = fs.createReadStream(zipFilename);
filestream.pipe(res);

on my Frontend i try to parse it with:

parseJSON(response) => {
  return response.clone().json().catch(() => response.text());
}

everything i tried ends up with an empty zip file. Any suggestions?

Answer 1

There are various issues with the options that you tried out:

• res.attachment will just set the Content-Type and Content-Disposition headers, but it will not actually send anything.

  You can use this to set the headers properly, but you need to pipe the ZIP file into the response as well.

• res.sendfile : You should not call .send() after this. From the official docs' examples:

   app.get('/file/:name', function (req, res, next) { var options = { ... }; res.sendFile(req.params.name, options, function (err) { if (err) { next(err); } else { console.log('Sent:', fileName); } }); }); 

  If the ZIP is properly built, this should work fine and set the proper Content-Type header as long as the file has the proper extension.

• res.download : Same thing, you should not call .send() after this. From the official docs' examples:

   res.download('/report-12345.pdf', 'report.pdf', function(err) { ... }); 

  res.download will use res.sendfile to send the file as an attachment, thus setting both Content-Type and Content-Disposition headers.

However, you mention that the ZIP file is being sent but it is empty, so you should probably check if you are creating the ZIP file properly. As long as they are built properly and the extension is .zip , res.download should work fine.

If you are building them on the fly, check this out:

This middleware will create a ZIP file with multiples files on the fly and send it as an attachment. It uses lazystream and archiver

const lazystream = require('lazystream');
const archiver = require('archiver');


function middleware(req, res) { 
    // Set the response's headers:
    // You can also use res.attachment(...) here.

    res.writeHead(200, {
        'Content-Type': 'application/zip',
        'Content-Disposition': 'attachment; filename=DOWNLOAD_NAME.zip',
    });

    // Files to add in the ZIP:

    const filesToZip = [
        'assets/file1',
        'assets/file2',
    ];

    // Create a new ZIP file:

    const zip = archiver('zip');

    // Set up some callbacks:

    zip.on('error', errorHandler);

    zip.on('finish', function() {
        res.end(); // Send the response once ZIP is finished.
    });

    // Pipe the ZIP output to res:  

    zip.pipe(res);

    // Add files to ZIP:

    filesToZip.map((filename) => {
        zip.append(new lazystream.Readable(() => fs
            .createReadStream(filename), {
               name: filename,
            });
    });

    // Finalize the ZIP. Compression will start and output will
    // be piped to res. Once ZIP is finished, res.end() will be 
    // called.

    zip.finalize();
}

You can build around this to cache the built ZIPs instead of building them on the fly every time, which is time and resource consuming and totally unadvisable for most uses cases.