Question

我遇到了转储问题。

我在MySQL数据库上手动上传了一张Image作为Longblob，如下所示：

现在我尝试在我的模板中的Hybrid Ionic 3 / Angular 4 App中显示该图像：

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

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

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

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

Answer 1

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

http://dataurl.net/#dataurlmaker

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

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

希望它有所帮助。

Answer 2

大！谢谢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，但如果我尝试将DataURL放入我的user.image变量，它说没有/未定义......你能解释一下吗？这可能是Ionic / Angular的安全理由吗？

Answer 3

我终于解决了它：

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-DataURL，所以我将我的getBase64（）函数外包给我的index.html并用另一个隐藏的输入标签触发它以将base64字符传递给我的this.user.image变量。

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

再次感谢！

Answer 4

那没有意义。.为什么要保存base64 URL。.尝试将普通URL存储在blob中，然后在检索时将其转换为base64。.由于base64 URL被转换为太长的URL，因此很明显，您的服务器将显示错误。.并且我们无法确定URL的长度，因此我们无法在为它创建数据库时定义base64 URL的大小。

希望你明白我的意思！

无法读取Blob Image - Ionic 3 / Angular 4

4 个答案: