javascript - Vue.js，下载后动态显示图像

Question

我正在使用 Vue.js/Node.js (express.js)
并尝试在通过 GET 请求(由 Axios)从服务器下载图像后显示图像。

该文件是由用户上传的，因此我们不知道它的详细信息(长度等)。
并且下载后需要展示给用户。

服务器收到下载请求后，只需从磁盘获取文件并将其放入响应中:

(req, res) => {
    ...
    res.download(file)
}

到目前为止，我在客户端中做到了这一点，
下载文件后，我将其转换为 Base64 字符串:

Buffer.from(response.data, 'binary').toString('base64')

(GET请求的响应)

并尝试在我的模板上显示它，如下所示:

:src="'data:image/png;base64,' + myBase64string"

而且根本没有成功!
非常感谢任何建议、建议、帮助等。

Answer 1

new Vue({
  el: '#app',
  
  data () {
    return {
      src: null
    }
  },
 
  mounted () {
    let self = this
    fetch("https://thumbs.dreamstime.com/z/freely-accessible-examination-exposition-mosaic-ar-figures-mosaic-st-petersburg-russia-june-freely-accessible-119320551.jpg")
    .then((response) => {
      response.blob().then(blobResponse => {
        let reader = new FileReader();
        reader.readAsDataURL(blobResponse); 
        reader.onloadend = function() {
          let base64data = reader.result; 
          let img = document.createElement('img')
          img.src = base64data  
          self.$refs['img-container'].appendChild(img)
        }
      })
    })
  }
})

img {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div ref="img-container"></div>
</div>