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

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日