无法读取斑点图像 - 离子3 /角4

问题描述：

我上传在我的MySQL数据库影像手动如LONGBLOB如图所示：

现在我尝试在我的混合离子3，以显示图像/角4应用在我的模板：

<img *ngIf="user.image" ng-src="data:image/png;base64,{{user.image}}" >

当我看着我的网络流量在Chrome中我只看到如图所示的空白图片：

有关信息：user.image来自Buffer as和Array类型。

为什么不显示我的Blob-Image？

答

编码的数据不是类型数组的缓冲区。相反，二进制数据被编码为基本64格式。

http://dataurl.net/#dataurlmaker

上述网址有助于将二进制数据转换成底座64的格式。

当您存储在MySQL数据库中时，您需要按原样存储编码数据。

希望它有帮助。

我试图直接回答你，但我的帖子高于你的帖子。请阅读以上:)。再次感谢！ – Rebar

答

太棒了！感谢Kannaiyan，你是对的，它的格式是错误的。现在，我尝试从文件输入读取DataURL：

<input class="fileInput" style="display:none;" type="file" (change)="getBase64()">

在打字稿：

getBase64() { 
let input = $(".fileInput").get(0); 
let b64; 
if (input.files && input.files[0]) { 

    var reader= new FileReader(); 
    reader.readAsDataURL(input.files[0]); 
    b64 = reader.result; 
} 
this.user.image = b64; 
}

首先感谢：如果我将输出粘贴到我的img标签它显示的图像，但奇怪的事是，如果我console.log(reader.result)，它打印正确的DataURL，但如果我尝试获取我的user.image变量中的DataURL它说没有/未定义......你能解释吗？它可能是Ionic/Angular的安全原因吗？

不客气。我认为你可能有一个范围问题。直接对user.image进行硬编码以查看是否取得该值并在浏览器中显示图像。 – Kannaiyan

答

我终于解决了这个问题：

function getBase64(event) { 

    let input = $("#fileInput").get(0).files[0]; 

    if (input) { 

    var reader = new FileReader(); 
    reader.readAsBinaryString(input); 
    reader.onloadend = (e) => { 
     console.log(btoa(reader.result)); 
     $("#img").attr('src','data:' + input.type + ';base64,' + btoa(reader.result)); 
     $("#source").attr('value', 'data:' + input.type + ';base64,' + btoa(reader.result)); 
    }; 
    }; 
}

我不能得到的Base64 DataURL在打字稿/角，所以我外包我getBase64（）函数来我index.html，然后用另一个隐藏的输入触发，标记将base64字符传递给我的this.user.image变量。

但现在，如果我尝试通过后发布：http.post('/uploadUserProfileImage', this.user, {headers: headers}) {...}我得到一个：在我的服务器的NodeJS“PayloadTooLargeError请求实体太大”错误。是的，我已经增加了允许的bodyParser Limits为50mb。但这是另一个帖子的另一个问题:)。

再次感谢！

无法读取斑点图像 - 离子3 /角4

相关推荐