nodejs解析图片成二进制，传递给前端 vue接收

nodejs:

app.get('/slider',(req, res)=>{
        fs.readFile('logo.png', 'binary', function(err, dataStr) {
            if(err) {
                //如果读取文件失败,则err的值为错误对象,dataStr的值为 undefined
                return console.log('读取文件失败!' + err.message);
            } else {
                //如果读取文件成功 则err的值为null
                console.log('读取文件成功!' + dataStr);
                res.send(dataStr)
            }
        })
})

前端vue:

<img :src="myimg" alt="">
...
getSlider(){
                axios  .get('test/slider',{responseType: 'blob'}).then(        //可以不写
                    response => {
                        console.log('slider请求成功了', response.data);
                        
                        let blob = new Blob([response.data], {type: "image/png"});   // 返回的文件流数据
                        console.log(blob)
                        let url = window.URL.createObjectURL(blob);  // 将他转化为路径
                        this.myimg = url

                    },
                    error => {console.log('请求失败！', error.message);}
                )
            }

img-src下放入blob:http://...格式图片，界面不显示？

控制台中能显示blob路径已经在src中了，但是界面就是不显示。。

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7640134
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：nodejs安装与配置，vue框架安装
除此之外, 这篇博客: Vue+nodejs慕课商城项目前后端数据传递，排序与分页功能实现中的 前后端数据传递 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

后端数据库采用mongodb，mongodb是非关系型数据库，存储集合。

1、首先下载moongose插件可以很方便的从mongodb中获取数据
在node搭建的服务端Server新建文件\model\goods

var mongoose = require('mongoose');
//moongose可以简捷的从mongoDB中获取数据
//moongose有一个模式Schema,用于定义从mongodb中查询的每一个条目
var Schema = mongoose.Schema;
//数据对象的模板
var productSchema = new Schema({
    "productId":String,
    "productName":String,
    "salePrice":Number,
    "productImage":String
});
//输出数据对象
module.exports = mongoose.model('Goods',productSchema);

使用moogose中的模式Schema定义查询模型并输出。
2、nodeJS端查询数据并返回结果\routes\goods
先导入相关模块，用到了express框架和moogose,model

 var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Goods = require('../models/goods');

连接数据库

mongoose.connect('mongodb://127.0.0.1:27017/数据库名称');
mongoose.connection.on("connected",function () {
  console.log("MongoDB connected success");
});
mongoose.connection.on("error",function () {
  console.log("MongoDB connected fail");
});
mongoose.connection.on("disconnected",function () {
  console.log("MongoDB connected disconnected");
});

查询数据
使用Express.Router()，对前端的get请求进行响应，并把结果放在result.list中，与status，msg一起以json形式返回给客户端

router.get("/",function (req,res,next) {
//用Goods模板调用moogoseAPI进行数据库查询
 Goods.find({},function (err,doc) {
    if(err){
      res.json({
        status:'1',
        msg:err.message
      });
    }else{
      res.json({
        status:'0',
        msg:'',
        result:{
          count:doc.length,
          //查询结果
          list:doc
        }
      })
    }
  })
});

3、客户端接收数据
跨域代理
nodejs执行的数据在localhost:3000,vue运行在8080，需要在config/index.js的dev下添加转发代理

 proxyTable: {
      '/goods':{
        target:'http://localhost:3000'
      }

每当vue利用axios访问/goods时时，就将地址转到3000
4、vue进行数据请求并渲染到界面
在mounted挂载一个getGoodsList()的方法，载入后调用这个方法。通过axios的/goods发送请求，刚刚编辑跨域代理，通过/goods可以请求到nodejs。data中存储返回的实际内容，status状态码为0时，表示成功，数据在result.llist中，对list进行遍历就可以将数据渲染到界面

mounted:function (){  
    this.getGoodsList();  
  },  
  methods:{  
    getGoodsList(){  
      axios.get("/goods").then(response =>{  
        let res=response.data;  
        if(res.status==0){  
          this.goodsList=res.result.list;  
        }else{  
          console.log("从服务器请求数据失败！");  
        }  
      })  
    },

v-for进行循环，图片利用插件用到了懒加载v-lazy

<ul>
                <li v-for = "(item,index) in goodsList">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName}}</div>
                    <div class="price">{{ item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>

您还可以看一下雷玉广老师的网页分析技术之一---Vue.js基础课程中的 Vue.js的安装小节, 巩固相关知识点

以下回答由chatgpt基于相关博客总结生成:

回答：

为了将图片解析为二进制数据并传递给前端Vue接收，可以使用nodejs中的fs模块和base64编码进行处理。以下为具体的解决方案：

1.使用fs模块读取图片文件并转换为base64编码：

const fs = require('fs');

// 读取图片文件并将其转换为base64编码
const imageData = fs.readFileSync('/path/to/image.png', { encoding: 'base64' });

2.将base64编码的图片数据通过接口传递给前端Vue：

使用Express框架搭建服务器，定义一个返回base64编码图片数据的接口，然后将得到的图片数据作为接口返回值传递给前端Vue。

const express = require('express');
const app = express();

// 定义一个返回base64编码图片数据的接口
app.get('/getImageData', (req, res) => {
  const imageData = fs.readFileSync('/path/to/image.png', { encoding: 'base64' });
  res.send(imageData);
});

// 启动服务器
app.listen(3000, () => console.log('Server running on port 3000'));

3.在前端Vue中接收图片数据并渲染：

前端Vue通过访问上述接口获取到图片数据，然后将其显示在页面上，可以使用<img>标签并将base64编码数据作为src属性传递给它来实现。

<template>
  <div>
    <!-- 显示图片 -->
    <img :src="imageData" alt="图像">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: ''
    };
  },
  created() {
    // 获取图片数据
    this.getImageData();
  },
  methods: {
    getImageData() {
      // 发送GET请求获取图片数据
      axios.get('/getImageData').then(response => {
        this.imageData = 'data:image/png;base64,' + response.data;
      }).catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

上述代码中，axios是一个常用的前端HTTP请求库，用于向服务器发送GET请求，获取base64编码图片数据，并将其赋值给imageData变量，接着将imageData显示在页面上。注意需要在data中定义imageData变量，并在mounted或created钩子函数中调用getImageData方法来获取图片数据。