nodejs如何讀取文件二進制 前端響應blob或base64顯示圖片
更新時間:2022年08月03日 14:08:18 作者:堅持學習前端日記
這篇文章主要介紹了nodejs如何讀取文件二進制 前端響應blob或base64顯示圖片方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
讀取文件二進制 前端響應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 是動態(tài)的 根據(jù)文件類型來取名 ? 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
參數(shù):
- 第一個參數(shù):讀取文件的路徑
- 第二個參數(shù):highWaterMark 最高水位線,默認最多讀取64K
讀取的內容都是buffer類型
返回的結果是一個可讀流的實例,是非流動模式–我們最后要轉化為流動模式
let rs=fs.createReadStream('./1.txt',{highWaterMark:1})
設置最高水位線每次讀取1k
let fs=require("fs"); // 第一個參數(shù),讀取文件的路徑 //第二個參數(shù) highWaterMark 最高水位線,默認最多讀取64K //讀取的類容都是buffer類型 //返回的結果是一個可讀流的實例,是非流動模式---我們最后要轉為流動模式 // 轉流動模式需要on事件監(jiān)測 let rs=fs.createReadStream('./1.txt',{highWaterMark:1}) //在內部不斷觸發(fā)rs.emit('data',數(shù)據(jù));data不能更改,留動模式開啟后,數(shù)據(jù)會瘋狂觸發(fā)data事件 let arr=[]; rs.on('data',function (chunk) { //chunk是buffer類型 arr.push(chunk); }) //監(jiān)聽文件讀取完畢,會自動觸發(fā)一次end事件,沒有讀取完是不會觸發(fā)的 //Buffer.concat合并小buffer rs.on('end',function (chunk) { console.log( Buffer.concat(arr).toString()); }) // 監(jiān)聽錯誤 rs.on('error',function (err) { console.log(err); }) // rs.resume() 恢復讀取 // rs.pause() 暫停讀取 //這兩個都控制是否繼續(xù)觸發(fā)data事件
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Node 使用express-http-proxy 做api網(wǎng)關的實現(xiàn)
這篇文章主要介紹了Node 使用express-http-proxy 做api網(wǎng)關的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-10-10基于node實現(xiàn)websocket協(xié)議
這篇文章主要介紹了基于node實現(xiàn)websocket協(xié)議的相關資料,需要的朋友可以參考下2016-04-04利用nginx + node在阿里云部署https的步驟詳解
這篇文章主要給大家介紹了關于利用nginx + node在阿里云部署https的步驟,文中通過圖文及示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧。2017-12-12Node.JS中快速掃描端口并發(fā)現(xiàn)局域網(wǎng)內的Web服務器地址(80)
在 Node.JS 中進行端口掃描還是比較方便的,一般會有廣播和輪詢兩種方式。下文重點給大家介紹node.js 掃描端口并發(fā)現(xiàn)局域網(wǎng)內的web服務器地址的方法,一起看看吧2017-09-09