node前端文件上传与接收

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()
    })