Node.js 无法读取水滴图像-离子3/角度4

我有个问题

我在我的MySQL数据库上手动上传了一个图像作为Longblob，如图所示：

现在，我尝试在模板中的混合离子3/Angular 4应用程序中显示该图像：

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

当我在Chrome中查看我的网络流量时，我只看到一个空图像，如图所示：

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

---

为什么不显示我的Blob图像？

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

上面的url有助于将二进制数据转换为Base64格式

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

---

希望有帮助。

太好了！谢谢Kannayan，你是对的，格式不对。现在，我尝试从文件输入中读取DataURL：

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

首先感谢：如果我将输出粘贴到img标记，它会显示图像，但奇怪的是，如果我使用console.logreader.result，它会打印正确的DataURL，但是如果我尝试在user.image变量中获取DataURL，它会说没有/未定义。。。你能解释一下吗？这可能是离子/角度的安全原因吗？

我终于解决了：

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));
    };
  };
}

我无法在Typescript/Angular中获取Base64数据URL，因此我将getBase64函数外包给index.html，并使用另一个隐藏的输入标记触发它，以将Base64字符传递给this.user.image变量

但是现在如果我尝试通过http.Post'/uploadUserProfileImage'，this.user，{headers:headers}{…}发布，我会在我的NodeJS服务器中得到一个PayloadTooLargeError:RequestEntity太大错误。是的，我已经将允许的bodyParser限制增加到50mb。但这是另一篇文章的另一个问题：

---

再次感谢

那没有道理。。为什么要保存base64 URL。。尝试将普通URL存储在blob中，然后在检索时将其转换为base64。。由于base64 URL转换为太长的URL，因此很明显您的服务器将显示错误。。我们无法决定URL的长度，所以在为其创建db时无法定义base64 URL的大小

---

希望你明白我的意思

我试着直接回答你，但我的帖子比你的高。请阅读以上内容：。再次感谢！不客气。我想你可能有一个范围问题。直接将该值硬编码到user.image，以查看是否接受该值并在浏览器中显示该图像。

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));
    };
  };
}