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

【问题标题】：Vue.js, show image dynamically after downloading itVue.js，下载后动态显示图片
【发布时间】：2020-07-05 18:13:21
【问题描述】：

我正在使用 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"

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

【问题讨论】：

标签： javascript html node.js vue.js download

【解决方案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>

【讨论】：

感谢@Shivam Singh，感谢您的回答。它对我不起作用，我的服务器发送数据的方式不同（我的响应与你的不同）。但你的回答指导我解决我的问题。真的很感激。
请用您服务器的回复更新问题，如果您觉得有帮助，请点赞。谢谢

【解决方案2】：

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

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

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

<img :src="imageUrl ">

根据this link URL.createObjectURL 方法，创建一个DOMString，其中包含一个代表参数中给定对象的URL。 URL 生存期与创建它的窗口中的文档相关联。

【讨论】：