如何在VueJS / Javascript中渲染utf8编码的blob

Question

我正在尝试将从数据库获取的二进制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) setImage(image)以下输出：

PNG

IHDRu <ÔFiCCPICC配置文件HWXSÉ[RIh¤ÞD）ҥГ Hl $ PBL” vdQÁµØÐUE×ÈZ±E±÷e]，ØPyóú½÷¾¾¾¾ÜÜûçÌÿ̽w®Dj+Î3Ç¥¤2I0t.O＆aÅÆÆF（÷Ê»ëQÜ8 ¯Ã±x±§óe¼\\÷ð$Ò|ÞÐn55_¢ÀÖ!!（p（pºW *}âØïLãr¥h6C;³y4oBì“æÄh！à¹|＃§ÀÐاÇùÎAN.7s«jQ 9D $äp§ ýíøß＃A＆FA）.J}»©A4»ÅéÑ1ëBüAÄWúCRòDJA±AIA | nH的$ A＆S¢£ÔöôQb¸BÐBQ>'A = W @¯æ¬æÅÅà）¥ 为 UAüOȳYjþBgÿm0Y3F-％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µe + GÚ¿ZUWg¡-PÃÈOÎþ+ g£％ÇГ”）：æU1ö³-Qj|©5àI％＃aDÜÀýð（xê{ããÙ）〜b'G°fìvHWÑ *§Ì'ò〜ÇUÇTtRæRïÒåòY5/（T¼; O2M *Êæ3YðÍ/rļáÃn.®ðø¨^ S =ßÄHçm|挪威岩土÷÷÷的@ãP¨ÝßlöЯpf> O.-PÙpÅ¿PZð2fÀ

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

Answer 1

我无法发表评论，因此只能发布答案。 如果需要，我将删除。

您可以使用一个库来处理前端的Blob解析。

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

该库具有内置的ES模块支持，因此应与Vue一起使用。