nodejs如何讀取文件二進(jìn)制 前端響應(yīng)blob或base64顯示圖片
讀取文件二進(jìn)制 前端響應(yīng)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) { ? ? ? // 可以更換不同文件 圖片 或者 文檔 等等 前端接受的時(shí)候 對(duì)應(yīng)就ok ? ? ? ? resolve(data) ? ? ? ? rejects(err) ? ? ? }) ? ? }) ? } ? let data = await ?read() ? res.send(data) }) http.listen(3000, () => { ? console.log('listening on *:3000'); })
前端響應(yīng)接受 使用了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 二進(jìn)制blob ? a.setAttribute('download','1.jpg') // 1.jpg 是動(dòng)態(tài)的 根據(jù)文件類型來取名 ? a.click() }) ? } } </script>
精簡(jiǎn)版
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ù):
- 第一個(gè)參數(shù):讀取文件的路徑
- 第二個(gè)參數(shù):highWaterMark 最高水位線,默認(rèn)最多讀取64K
讀取的內(nèi)容都是buffer類型
返回的結(jié)果是一個(gè)可讀流的實(shí)例,是非流動(dòng)模式–我們最后要轉(zhuǎn)化為流動(dòng)模式
let rs=fs.createReadStream('./1.txt',{highWaterMark:1})
設(shè)置最高水位線每次讀取1k
let fs=require("fs"); // 第一個(gè)參數(shù),讀取文件的路徑 //第二個(gè)參數(shù) highWaterMark 最高水位線,默認(rèn)最多讀取64K //讀取的類容都是buffer類型 //返回的結(jié)果是一個(gè)可讀流的實(shí)例,是非流動(dòng)模式---我們最后要轉(zhuǎn)為流動(dòng)模式 // 轉(zhuǎn)流動(dòng)模式需要on事件監(jiān)測(cè) let rs=fs.createReadStream('./1.txt',{highWaterMark:1}) //在內(nèi)部不斷觸發(fā)rs.emit('data',數(shù)據(jù));data不能更改,留動(dòng)模式開啟后,數(shù)據(jù)會(huì)瘋狂觸發(fā)data事件 let arr=[]; rs.on('data',function (chunk) { //chunk是buffer類型 arr.push(chunk); }) //監(jiān)聽文件讀取完畢,會(huì)自動(dòng)觸發(fā)一次end事件,沒有讀取完是不會(huì)觸發(fā)的 //Buffer.concat合并小buffer rs.on('end',function (chunk) { console.log( Buffer.concat(arr).toString()); }) // 監(jiān)聽錯(cuò)誤 rs.on('error',function (err) { console.log(err); }) // rs.resume() 恢復(fù)讀取 // rs.pause() 暫停讀取 //這兩個(gè)都控制是否繼續(xù)觸發(fā)data事件
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
nodejs簡(jiǎn)單讀寫excel內(nèi)容的方法示例
這篇文章主要介紹了nodejs簡(jiǎn)單讀寫excel內(nèi)容的方法,簡(jiǎn)單分析了nodejs常見的讀寫Excel模塊,并結(jié)合實(shí)例形式分析了nodejs讀寫Excel具體操作技巧,需要的朋友可以參考下2018-03-03Node 使用express-http-proxy 做api網(wǎng)關(guān)的實(shí)現(xiàn)
這篇文章主要介紹了Node 使用express-http-proxy 做api網(wǎng)關(guān)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10基于node實(shí)現(xiàn)websocket協(xié)議
這篇文章主要介紹了基于node實(shí)現(xiàn)websocket協(xié)議的相關(guān)資料,需要的朋友可以參考下2016-04-04利用nginx + node在阿里云部署https的步驟詳解
這篇文章主要給大家介紹了關(guān)于利用nginx + node在阿里云部署https的步驟,文中通過圖文及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12Node.JS中快速掃描端口并發(fā)現(xiàn)局域網(wǎng)內(nèi)的Web服務(wù)器地址(80)
在 Node.JS 中進(jìn)行端口掃描還是比較方便的,一般會(huì)有廣播和輪詢兩種方式。下文重點(diǎn)給大家介紹node.js 掃描端口并發(fā)現(xiàn)局域網(wǎng)內(nèi)的web服務(wù)器地址的方法,一起看看吧2017-09-09前端node Session和JWT鑒權(quán)登錄示例詳解
關(guān)于前端鑒權(quán)登錄是比較常見的需求了,本文將從服務(wù)端渲染和前后端分離的不同角度下演示鑒權(quán),為大家介紹前端node Session和JWT鑒權(quán)登錄示例詳解2022-07-07