Satan` 2023-05-05 16:48 采纳率: 14.3%
浏览 27

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);}
                )
            }
  • 写回答

2条回答 默认 最新

  • Satan` 2023-05-05 16:56
    关注

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

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

    评论

报告相同问题?

问题事件

  • 创建了问题 5月5日

悬赏问题

  • ¥20 C# NetworkStream WriteAsync方法卡住无反应
  • ¥15 这个如何解决详细步骤
  • ¥15 在微信h5支付申请中,别人给钱就能用我的软件,这个的所属行业是啥?
  • ¥30 靶向捕获探针设计软件包
  • ¥15 react-diff-viewer组件,如何解决数据量过大卡顿问题
  • ¥20 遥感植被物候指数空间分布图制作
  • ¥15 安装了xlrd库但是import不了…
  • ¥20 Github上传代码没有contribution和activity记录
  • ¥20 SNETCracker
  • ¥15 数学建模大赛交通流量控制