模板部分:
<div class="image-div">
<el-image
class="image-item"
:src="fileUrl_blob ? fileUrl_blob : fileBigUrl_blob"
:preview-src-list="[fileBigUrl_blob]">
</el-image>
</div>
js部分:
赋值:
data(){
return{
fileUrl_blob: '',
fileBigUrl_blob: ''
}
}
调用:
this.loadFile('fileUrl_blob', this.fileUrl));
根据文件路径加载图片的具体实现方法:
loadFile(fieldname, fileUrl) {
if (!fileUrl) {
this[fieldname] = '';
return
}
request({
url: fileUrl,
method: 'get',
responseType: 'blob'
}).then(response => {
const suffixIndex = fileUrl.lastIndexOf(".");
const suffix = fileUrl.substring(suffixIndex + 1).toLowerCase();
const blob = new Blob([response], { type: 'image/' + suffix + (suffix == 'svg' ? '+xml' : '') });
this[fieldname] = URL.createObjectURL(blob);
})
.catch(error => {
console.error('There was an error fetching the image:', error);
this[fieldname] = '';
});
}