如何在 VueJS/Javascript 中呈现 utf8 编码的 blob答案

【问题标题】：How to render utf8 encoded blob in VueJS/Javascript如何在 VueJS/Javascript 中呈现 utf8 编码的 blob
【发布时间】：2019-06-04 08:05:16
【问题描述】：

我正在尝试将从数据库中获取的二进制 blob 转换为可以使用 <img>-Tag 呈现的图像。

在我的 Laravel 后端中，我像这样返回 blob/数据：

$user = User::find($id);

$user->photo = utf8_encode($user->photo); // $user->photo is saved as blob in MySQL database

return $user;

我之所以使用utf8_encode，是因为数据是以JSON形式返回的。

在 VueJS 中，我确实尝试了以下方法来渲染图像：

<input type="file" @change="onFileSelect">
<img :src="setImage(userdata.photo)">

setImage(image) {
    let objurl = window.URL.createObjectURL(new Blob([image]));

    return objurl;
}

onFileSelect(e) {
    this.userdata.photo = e.target.files[0];
}

如果我在input 中选择一个文件，则相应地呈现图像。但是当我从服务器获取数据时，它应该会加载保存的图像。

如果我在服务器请求后在setImage(image) 方法中console.log(image)，我会得到以下输出：

PNG

IHDRu'A=w@¯æ¬æÅÅà)¥ÛÀã üOÈ³YjþBgÿm0!Y3F-%EC¬ ±,;>RåY ÙÑ>Ry"k}âð?6)C§öæÊêÅEh5®Ê&D¨yvð¸Êü !nY<Ù¸¨ZøPUíØ%8Q]/Ö!ÉSÏ}-ÉUûãTAN¸Ân ±¬ ^=ÈRÅGKòcTyâéYÜÑ±ª|ðBØ 0j:ÈY@ÔÖÝÔ ©FÂHA&gµeF²rD¯ñ üÈç+G Ú¿ZUWg¡-PÎÈO Î þ+g£%ÇÐ"ú):æU1ö³-Qj|© 5àI%#aDÜÀýð(x ê{ã>Ù~ó'bG°fìvHWÑcå*§Ì'ò~ÇUÇTtRæRïÒåòY5/(T¼;O2M*Êæ3YðÍ/rÄ¼áÃn.®ðø¨^S=ßÄHçm|nGi÷÷øf@ãP¨ÝßlöÐ¯pf>O. -PÙpÅ¿PZð2fÀ

如果我将这些东西传递给我的 setImage() 方法，我不会收到任何错误。 Blob URL 已创建，但 <img> 标记仅显示“空”图像。等等。有没有办法可以将这个 utf8_encoded blob 转换成有用的东西？

【问题讨论】：

为什么将图像作为 blob 存储在 DB 中？
@commonsense 这就是我想要处理上传的方式。我不想创建一个 tmp 文件夹或保存每次上传的东西。

标签： javascript mysql laravel vue.js blob

【解决方案1】：

我无法发表评论，因此不得不发布作为答案。如果需要，我会删除。

您可以使用库来处理前端的 blob 解析。

https://www.npmjs.com/package/blob-util

该库已内置 ES 模块支持，因此可以与 Vue 一起使用。

【讨论】：