通过使用sequelize v5解码base64来保存图像blob

Question

我想将收到的 Base64 字符串保存在 mysql 表中的 BLOB 字段中。我使用了sequelize版本5作为我的ORM，模型定义如下。

sequelize.define('PLAYER', {
        player_id: {
            primaryKey: true,
            type: DataTypes.INTEGER,
            allowNull: false,
            autoIncrement: true
        },
        player_name: DataTypes.STRING,
        player_image:  {
            type: DataTypes.BLOB('medium'),
            get () {
                 let data = this.getDataValue('player_image');
                 return data ? data.toString('base64') : '';
            }
    }
}

在我的 put 方法中，

db.PLAYER.findByPk(req.params.playerId).then((player)=>{

  if (req.body.player_image) {
     const base64 = req.body.player_image.replace(/^data:image\/[a-z]+;base64,/, "");

     const blob = b64toBlob(base64, 'image/jpeg');
     player.player_image = blob;
  }

  player.player_name = req.body.player_name;

  player.save().then(() => {
      res.status(200).json(player);
  }).catch(function (err) {
      return next(err);
  });
});

用于 Base64 到 Blob 的转换。

const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });

    return blob;
}

表中正在保存一个 blob，但我的响应正文如下。在发送响应之前，我已将 BLOB 转换为 base64。

{ 
  "player_id": 1032,
  "player_name": "Oliver Driscoll",
  "player_image": "[object Blob]"
}

这意味着保存的 blob 实际上是“[object Blob]”。不是图片。

确认接收到的终点的 Base64 (

req.body.player_image

) 是正确的。我时间不多了，不知道该怎么办，因为这是要求（将图像保存为 blob）。

Answer 1

我知道，这是一个老问题了。但我也遇到了同样的问题，经过多次尝试，我终于解决了。所以，如果以后有人遇到这个问题，我会把我的解决方案放在这里：

就我而言，我已经能够从获取响应中获取 Blob。 所以我的代码中有这样的：

await fetch(imageUrl)
.then(async (response) => {
  // GET Blob Object from response; can use response.arrayBuffer() directly too
  let myBlobImg = await response.blob();

  // Convert Blob.ArrayBUffer to a Buffer
  let myBufferImg = Buffer.from(await myBlobImg.arrayBuffer());
})

然后我将

myBufferImg

保存在数据库上，作为缓冲区。在你的情况下@silent_27可能是

player.player_image = Buffer.from(await myBlobImg.arrayBuffer());

我在 NodeJS 上使用 SQlite3 DataBase 和 sqlite3^5.0.1 包。

我像这样保存在我的数据库中并且工作正常。我尝试过像

myBlobImg.text();

那样保存。但这样一来，我无法在我的应用程序中加载

<img src={}>

html 标签。

如果有人需要知道，要在

<img>

HTML 上显示此 BLOB，我只需在数据库上执行 get 操作即可获取我的 ProductObject 并转换为 Base64 图像：

// imageData is the Buffer saved on BD. imageData.data is an Array from Buffer
let imgBase64 = Buffer.from(product.productImage.imageData.data).toString('base64');
imgBase64 = `data:image/jpeg;base64,${imgBase64}`;
//....
<img src={imgBase64}>

我必须再次使用

Buffer.from

，否则如果我只是使用like

let imgBase64 = product.productImage.imageData.toString('base64');

imgBase64 将是

"[Object ojbect]

Answer 2

您只需转换数据，而不是对象。