我正在 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"而且根本没有成功！非常感谢任何建议、建议、帮助等。
2 回答
跃然一笑
TA贡献1826条经验 获得超6个赞
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>
aluckdog
TA贡献1847条经验 获得超7个赞
请求的响应类型（axios请求）应该是 responseType: 'blob'
从服务器接收到数据后，我简单地使用下面这行代码生成一个DOM字符串，然后将其作为图像标签的src：
const imageUrl = window.URL.createObjectURL(new Blob([response.data])) <img :src="imageUrl ">
- 2 回答
- 0 关注
- 64 浏览
添加回答
举报
0/150
提交
取消