使用客户端 Javascript 从 Node 的 readStream 中保存图像
Saving an image from Node's readStream with client Javascript
我已经为这个问题苦苦挣扎了一段时间,需要你们的帮助!我正在尝试简化从我的网站下载报告的过程。对于 node,这对于 readStream 来说相当简单,如下所示:
router.post('/report', (req, res) => {
const filename = 'test.png';
const filePath = path.join(__dirname, filename);
fs.exists(filePath, exists => {
if (exists) {
const stat = fs.statSync(filePath);
res.writeHead(200, {
'Content-Type': 'image/png',
'Content-Length': stat.size,
'Content-Disposition': 'attachment; filename=' + filename,
});
fs.createReadStream(filePath).pipe(res);
} else {
res.writeHead(400, { 'Content-Type': 'text/plain' });
res.end('ERROR File does NOT Exists');
}
});
});
现在,如果我使用 Postman 或其他一些 API 测试器尝试此操作,它会完美运行,文件已正确下载和保存。现在我正在努力让它在我的前端工作。我目前是 运行 AngularJS 并尝试使用 FileSaver.js 作为获取此数据并保存它的方法,但它从来没有用过。文件已保存,但数据不可读,也就是图像预览器说图像已损坏。我想我创建的 Blob 不正确?
function exportReport(_id) {
this.$http
.post(
'/api/report',
{ _id },
{
headers: {
'Content-type': 'application/json',
Accept: 'image/png',
},
}
)
.then(data => {
console.log(data);
const blob = new Blob([data], {
type: 'image/png',
});
this.FileSaver.saveAs(blob, 'testing.png');
});
}
控制台日志结果如下:
Object {data: "�PNG
↵↵
IHDRRX��iCCPICC Profi…g�x @� @������Z��IEND�B`�", status: 200, config: Object, statusText: "OK", headers: function}
我要解码 object.data
吗?
尝试将 responseType: 'blob'
添加到请求中并忽略创建新的 blob:
function exportReport(_id) {
this.$http
.post(
'/api/report',
{ _id },
{
headers: {
'Content-type': 'application/json',
Accept: 'image/png',
},
responseType: 'blob'
}
)
.then(data => {
console.log(data);
this.FileSaver.saveAs(data.data, 'testing.png');
});
}
我已经为这个问题苦苦挣扎了一段时间,需要你们的帮助!我正在尝试简化从我的网站下载报告的过程。对于 node,这对于 readStream 来说相当简单,如下所示:
router.post('/report', (req, res) => {
const filename = 'test.png';
const filePath = path.join(__dirname, filename);
fs.exists(filePath, exists => {
if (exists) {
const stat = fs.statSync(filePath);
res.writeHead(200, {
'Content-Type': 'image/png',
'Content-Length': stat.size,
'Content-Disposition': 'attachment; filename=' + filename,
});
fs.createReadStream(filePath).pipe(res);
} else {
res.writeHead(400, { 'Content-Type': 'text/plain' });
res.end('ERROR File does NOT Exists');
}
});
});
现在,如果我使用 Postman 或其他一些 API 测试器尝试此操作,它会完美运行,文件已正确下载和保存。现在我正在努力让它在我的前端工作。我目前是 运行 AngularJS 并尝试使用 FileSaver.js 作为获取此数据并保存它的方法,但它从来没有用过。文件已保存,但数据不可读,也就是图像预览器说图像已损坏。我想我创建的 Blob 不正确?
function exportReport(_id) {
this.$http
.post(
'/api/report',
{ _id },
{
headers: {
'Content-type': 'application/json',
Accept: 'image/png',
},
}
)
.then(data => {
console.log(data);
const blob = new Blob([data], {
type: 'image/png',
});
this.FileSaver.saveAs(blob, 'testing.png');
});
}
控制台日志结果如下:
Object {data: "�PNG
↵↵
IHDRRX��iCCPICC Profi…g�x @� @������Z��IEND�B`�", status: 200, config: Object, statusText: "OK", headers: function}
我要解码 object.data
吗?
尝试将 responseType: 'blob'
添加到请求中并忽略创建新的 blob:
function exportReport(_id) {
this.$http
.post(
'/api/report',
{ _id },
{
headers: {
'Content-type': 'application/json',
Accept: 'image/png',
},
responseType: 'blob'
}
)
.then(data => {
console.log(data);
this.FileSaver.saveAs(data.data, 'testing.png');
});
}