使用Node Express应用下载文件作为响应

时间:2019-07-17 19:14:02

标签: javascript node.js reactjs express

我在Express应用程序方面遇到问题。我正在使用multer上传文件,然后使用res.download将文件发回。这似乎适用于文本文件,但图像不起作用。当我将文件发送给客户端时,文件大小实际上比服务器上的大小小一点。似乎没有传输完整文件。

我对使用res.download的响应没有任何幻想。我基本上已经研究了我能找到的每篇文章,而且似乎对其他所有人也有用。

仅文本文件有效。 Word,excel,pdf都表示它们在下载时已损坏。

编辑:这是运行res.download的功能。它通过了文件路径,mimetype等。

function downloadFile(req, res) {   
    let fpath = req.body.path; 
    let originalName = req.body.originalName;
    let mimetype = req.body.mimetype;
    let filename = req.body.filename;

    res.download(fpath, originalName, function(err) {
        if (err) {
            console.log(err);
        }        
    });

}

编辑:这是我的redux thunk,它发出请求并触发文件下载。下载功能来自downloadjs库。

export const downloadFile = (path, originalName, mimetype, filename) => { 
    return dispatch => {                
        return axios.post('/api/v1/quotes/downloadFile', { path: path, originalName: originalName, mimetype: mimetype, filename: filename })
        .then(res => {                
            if (res.status !== 200) {
                ErrorHandler.logError(res);                
            } 
            else {                                        
               // download(res.data, originalName);             
               download(new Blob([res.data]), originalName, mimetype);
            }         
        }).catch(function(error) {
            ErrorHandler.logError(error);                               
        });
    }
}

编辑:这是我在“网络”标签中看到的内容的一小部分。看起来像是图像内容,但是大小小于服务器上的大小,当我尝试打开它时,出现了不受支持的文件类型错误。

PNG


IHDR{>õIÖÕsRGB®ÎégAMA±üa    pHYsÃÃÇo¨d+{IDATx^íÝml\×ßq¾jº]´Mv´¤ÛÅvÛnÛEßt4/vQ[äÅ¢¯òb>-
él²æJv$Ǧ(ѦDÉR$R
¥V-Q6mÅ4kF¶®,U%ÊYS¶åDr¼5ÿ=ÿ{Ï9sîÌ!Gßp@Î}¾çÞ9÷7÷Þ¹Ó!¸o/ÛÚaï>MOJ4µ¸aíÐF{÷ég?ùó?µÚa a=öFØHa a=öFØHa 

请求标头

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 160
Content-Type: application/json;charset=UTF-8
Host: localhost:3000
Origin: http://localhost:3000
Referer: http://localhost:3000/Quote
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

响应标题

accept-ranges: bytes
cache-control: public, max-age=0
connection: close
content-disposition: attachment; filename="sSubLineConfigIds.PNG"
content-length: 11238
content-type: application/octet-stream
date: Wed, 17 Jul 2019 19:03:54 GMT
etag: W/"2be6-16c0151b84a"
last-modified: Wed, 17 Jul 2019 19:03:48 GMT
x-powered-by: Express

2 个答案:

答案 0 :(得分:0)

按照共享的代码,一切看起来不错。 似乎此请求是从您的前端端通过XHR发起的,而不是您必须编写下载逻辑以将响应转换为Blob,然后按照how-to-create-a-dynamic-file-link-for-download-in-javascript

的说明创建要下载的文件

答案 1 :(得分:0)

我能够弄清楚这一点。我最终要做的是将文件转换为base64,并将下载链接设置为该base64字符串。

被击中以构建base64字符串的节点函数。

function downloadFile(req, res) {   
    let fpath = req.body.path;   
    let mimetype = req.body.mimetype; 

    fs.readFile(fpath, function (err, data) {        
        if (err) res.status(500).send('File could not be downloaded');

        var base64 = Buffer.from(data).toString('base64');
        base64='data:' + mimetype + ';base64,'+base64;
        res.send(base64);
    });  
}

这是构建链接,模拟点击并将源链接设置为等于base64字符串的客户端代码。

export const downloadFile = (path, originalName, mimetype, filename) => { 
    return dispatch => {                
        return axios.post('/api/v1/quotes/downloadFile', { path: path, originalName: originalName, mimetype: mimetype, filename: filename })
        .then(res => {                
            if (res.status !== 200) {
                ErrorHandler.logError(res);                
            } 
            else {                        
                const linkSource = res.data;
                const downloadLink = document.createElement("a");
                const fileName = originalName;

                downloadLink.href = linkSource;
                downloadLink.download = fileName;
                downloadLink.click();                        
            }         
        }).catch(function(error) {
            ErrorHandler.logError(error);                               
        });
    }
}