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

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

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

<img :src="imageUrl ">