本篇内容介绍了“nodejs怎么读取文件二进制前端响应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="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() })
参数:
第一个参数:读取文件的路径
第二个参数: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事件
“nodejs怎么读取文件二进制前端响应blob或base64显示图片”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。