读取文件二进制 前端响应blob或base64显示图片
express 框架 nodejs
var express = require('express') var app = express(); var fs = require('fs') var http = require('http').createServer(app); app.get('/send',async (req, res) => { res.setHeader('Access-Control-Allow-Origin','*'); function read () { return new Promise((resolve, rejects) => { fs.readFile('./public/2020.jpg',function(err, data) { resolve(data) rejects(err) }) }) } let data = await read() res.send(data) }) http.listen(3000, () => { console.log('listening on *:3000'); });app.get('/send',async (req, res) => { res.setHeader('Access-Control-Allow-Origin','*'); function read () { return new Promise((resolve, rejects) => { fs.readFile('./public/2020.jpg',function(err, data) { // 可以更换不同文件 图片 或者 文档 等等 前端接受的时候 对应就ok resolve(data) rejects(err) }) }) } let data = await read() res.send(data) }) http.listen(3000, () => { console.log('listening on *:3000'); })
前端响应接受 使用了vue脚手架
<template> <div id="app"> <img :src="https://www.atool.online/article/src" alt="12"> </div> </template>
<script> export default { data () { return { src: '' } }, created () { function blobToDataURI (blob) { return new Promise((resolve, reject) => { let reader = new FileReader() reader.readAsDataURL(blob)//blob reader.onload = function (e) { resolve(e.target.result)//base64 } }) } fetch('http://localhost:3000/send').then(x=>x.blob()) .then(async res=>{ var body = document.body await blobToDataURI(res).then(reu => { this.src = reu // base64显示图片 }) //this.src = URL.createObjectURL(res) blob流显示图片 console.log(URL.createObjectURL(res)) var a = document.createElement('a') a.setAttribute('href', URL.createObjectURL(res)) body.appendChild(a) //Blob {size: 50107, type: "application/octet-stream"} res 二进制blob a.setAttribute('download','1.jpg') // 1.jpg 是动态的 根据文件类型来取名 a.click() }) } } </script>
精简版
function base (blob) { var read = new FileReader() read.readAsDataURL(blob) read.onload = function (x) { console.log(x.target.result) var body = document.body var a = document.createElement('a') a.setAttribute('download', '1.pdf') a.setAttribute('href', x.target.result) body.appendChild(a) a.click() } } fetch('http://localhost:3000/send').then(x => x.blob()).then(x => { console.log(x) var body = document.body var a = document.createElement('a') // var url = window.URL.createObjectURL(new Blob([x])) base(new Blob([x])) // a.setAttribute('download', '1.pdf') // a.setAttribute('href', url) // body.appendChild(a) // a.click() })
nodejs读取文件 createReadStream
参数:
- 第一个参数:读取文件的路径
- 第二个参数:highWaterMark 最高水位线,默认最多读取64K
读取的内容都是buffer类型
返回的结果是一个可读流的实例,是非流动模式–我们最后要转化为流动模式
let rs=fs.createReadStream('./1.txt',{highWaterMark:1})
设置最高水位线每次读取1k
let fs=require("fs"); // 第一个参数,读取文件的路径 //第二个参数 highWaterMark 最高水位线,默认最多读取64K //读取的类容都是buffer类型 //返回的结果是一个可读流的实例,是非流动模式---我们最后要转为流动模式 // 转流动模式需要on事件监测 let rs=fs.createReadStream('./1.txt',{highWaterMark:1}) //在内部不断触发rs.emit('data',数据);data不能更改,留动模式开启后,数据会疯狂触发data事件 let arr=[]; rs.on('data',function (chunk) { //chunk是buffer类型 arr.push(chunk); }) //监听文件读取完毕,会自动触发一次end事件,没有读取完是不会触发的 //Buffer.concat合并小buffer rs.on('end',function (chunk) { console.log( Buffer.concat(arr).toString()); }) // 监听错误 rs.on('error',function (err) { console.log(err); }) // rs.resume() 恢复读取 // rs.pause() 暂停读取 //这两个都控制是否继续触发data事件
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。