前几天，一个简单的图片下载需求折腾了后端大佬好几天，最后还是需要前端来做。借此机会总结一下下载图片有多少种方式。首先启动一个服务使用expressjs启动一个简单的后端服务，首先安装：mkdirdemocddemonpminitnpminstallexpress--save//v4.17.1然后创建一个app.js文件，输入：constexpress=require('express')constapp=express()app.get('/',(req,res)=>{res.send('helloworld')})app.listen(3000,()=>{console.log('服务启动完成')})然后在命令行输入：nodeapp.js，访问http://localhost:3000/，页面显示helloworld，表示服务启动成功。接下来模拟几种情况：情况1.创建一个静态图片的公用文件夹，复制一张随机图片如test.jpg进去，添加如下代码：//...app.use(express.static('./public'))//app.listen...浏览器访问http://localhost:3000/test.jpg可以看到图片。案例2.读取图像文件并将其作为流返回app.get('/getFileStream',(req,res)=>{constfileName=req.query.nameconststream=fs.createReadStream(path.resolve('./public/'+fileName))stream.pipe(res)})浏览器访问http://localhost:3000/getFileStream?name=test.jpg即可访问图片。Case3.读取图片文件返回流并添加Content-Disposition响应头。Content-Disposition响应头是MIME协议的扩展。它用于告诉浏览器如何处理服务器发送的文件。有三个值：Content-Disposition:inline//如果浏览器可以直接打开文件，则直接打开，否则触发保存Content-Disposition:attachment//告诉浏览器作为附件发送，它会直接触发保存，接口名会作为默认文件名Content-Disposition:attachment;filename="xxx.jpg"//告诉浏览器以附件形式发送，会直接触发保存，filename的值作为默认文件名app.get('/getAttachmentFileStream',(req,res)=>{constfileName=req.query.name//附件方法实际上设置了两个响应头的值：/*Content-Disposition:attachment;filename="【文件名】"Content-Type:【文件MIME类型】*/res.attachment(fileName);conststream=fs.createReadStream(path.resolve('./public/'+fileName))stream.pipe(res)})情况4.动态生成图片返回流生成两个二维码为例，使用qr-image库创建二维码，添加如下代码：constqr=require('qr-image')app.get('/createQrCode',(req,res)=>{//生成二维码只读流constdata=qr.image(req.query.text,{type:'png'});data.pipe(res)})Case5.返回base64字符串app.get('/createBase64QrCode',(req,res)=>{constdata=qr.image(req.query.text,{type:'png'});constchunks=[]letsize=0data.on('data',(chunk)=>{chunks.push(chunk)size+=chunk.length})data.on('end',()=>{constdata=Buffer.concat(chunks,size)constbase64=`data:image/png;base64,`+data.toString('base64')res.send(base64)})})情况六、post请求方式以上几种情况//解析json类型的请求体app.use(express.json())//解析urlencoded类型的请求体app.use(express.urlencoded())app.post('/getFileStream',(req,res)=>{constfileName=req.body.nameconststream=fs.createReadStream(path.resolve('./public/'+fileName))stream.pipe(res)})app.post('/getAttachmentFileStream',(req,res)=>{constfileName=req.body.nameres.attachment(fileName);conststream=fs.createReadStream(path.resolve('./public/'+fileName))流.pipe(res)})app.post('/createQrCode',(req,res)=>{constdata=qr.image(req.body.text,{type:'png'});data.pipe(res)})a.a标签downloada标签html5版本增加了一个download属性，用于告诉浏览器下载url而不是导航到它，可以有一个属性值，作为文件保存文件时的名称。虽然说有同源限制，但我实际测试，非同源也可以下载对于没有设置Content-Disposition响应头或者设置为inline的图片，因为图片是浏览器可以打开的文件，所以不会触发下载，而是直接打开，浏览器无法预览文件不管是否有Content-Disposition头都会触发保存：
