我正在 Vue.js / Node.js (express.js) 中工作，并嘗試在通過 GET 請求（由 Axios）從服務(wù)器下載圖像后顯示圖像。該文件是由用戶上傳的，因此我們不知道它的詳細(xì)信息（長度等）。并且下載后需要展示給用戶。服務(wù)器收到下載請求后，只需從磁盤獲取文件并將其放入響應(yīng)中：(req, res) => { ... res.download(file)}到目前為止，我在客戶端中執(zhí)行了此操作，下載文件后，我將其轉(zhuǎn)換為 Base64 字符串：Buffer.from(response.data, 'binary').toString('base64')（GET 請求的響應(yīng)）并嘗試在我的模板上顯示它，如下所示：:src="'data:image/png;base64,' + myBase64string"而且根本沒有成功！非常感謝任何建議、建議、幫助等。
2 回答
躍然一笑
TA貢獻(xiàn)1826條經(jīng)驗 獲得超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貢獻(xiàn)1847條經(jīng)驗 獲得超7個贊
請求的響應(yīng)類型（axios請求）應(yīng)該是?responseType: 'blob'
從服務(wù)器接收到數(shù)據(jù)后，我簡單地使用下面這行代碼生成一個DOM字符串，然后將其作為圖像標(biāo)簽的src：
const?imageUrl?=?window.URL.createObjectURL(new?Blob([response.data])) <img?:src="imageUrl?">
- 2 回答
- 0 關(guān)注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消