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>

Answer 2

在@Shivam Singh 和这个方便的 git 回购的大力帮助下 download-file.js, 我可以解决这个问题。

请求（Axios请求）的响应类型应该是 响应类型：'blob'
从服务器接收数据后，我简单地使用下面的这行代码生成一个 DOM 字符串，然后将其作为 src 放置到图像标签中：

const imageUrl = window.URL.createObjectURL(new Blob([response.data]))

<img :src="imageUrl ">

根据this link URL.createObjectURL方法，创建一个DOM字符串，其中包含一个URL表示参数中给定的对象。 URL 生命周期与创建它的 window 中的文档相关联。

Vue.js，下载后动态显示图片

Vue.js, show image dynamically after downloading it

html

javascript

download

node.js

vue.js