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({&nbsp; el: '#app',&nbsp;&nbsp;&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; src: null&nbsp; &nbsp; }&nbsp; },&nbsp;&nbsp; mounted () {&nbsp; &nbsp; let self = this&nbsp; &nbsp; fetch("https://thumbs.dreamstime.com/z/freely-accessible-examination-exposition-mosaic-ar-figures-mosaic-st-petersburg-russia-june-freely-accessible-119320551.jpg")&nbsp; &nbsp; .then((response) => {&nbsp; &nbsp; &nbsp; response.blob().then(blobResponse => {&nbsp; &nbsp; &nbsp; &nbsp; let reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(blobResponse);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; reader.onloadend = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let base64data = reader.result;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let img = document.createElement('img')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.src = base64data&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.$refs['img-container'].appendChild(img)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; }})img {&nbsp; height: 300px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <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 ">