如何在存储在数据库中的 vue.js 中渲染 blob 图像

Question

我在前端使用 Vue.js。我在后端有 Node.js、Express、PostgreSQL（带有Sequelize）。

我正在数据库中存储一个包含缩略图的项目。

数据库模型

const Item = sequelize.define('item', {
    id: {
        type: Sequelize.INTEGER,
        primaryKey: true,
        autoIncrement: true
    },
    name: {
        type: Sequelize.TEXT,
        allowNull: false,
    },

    image: {
        type: Sequelize.BLOB('long'),
        allowNull: true,
    },

在数据库方面，图像被存储为 Blob，我认为这很好（是的，我知道将图像放入数据库并不是最佳实践）。

我在浏览器中观察到，我在 Vue 模板中访问this.item.image的对象是类型为 的对象Buffer。

添加到数据库

我在我的 vue 模板中使用这个将项目添加到浏览器中的数据库中：

     <label for="image" class="itemCreate__field itemCreate__field--image">
       <span class="itemCreate__fieldLabel">Image</span>
       <input id="file"  type="file" accept="image/*" @change="onFileChange"/>
        <img v-if="itemPreviewImage" :src="itemPreviewImage" />
     </label>

而 HTML 依赖于这些方法：

     onFileChange(evt) {
        const files = evt.target.files || evt.dataTransfer.files;
        if (!files.length) return;
        this.createImage(files[0]);

    },
    createImage(file) {
        const image = new Image();
        const reader = new FileReader();

        reader.onload = evt => {
            this.itemPreviewImage = evt.target.result;
            this.item.image = evt.target.result;
        }

        reader.readAsDataURL(file);
    },

我在渲染图像的 vue 模板中有这个：

        <div v-if="item.image">
            <img :src="imgUrl" alt="Picture of item"/>
        </div>

从数据库渲染

我尝试了以下方法，但都不起作用：

createObjectUrl从这里借来的：

    imgUrl(){
      const objUrl = window.URL.createObjectURL(new Blob(this.item.image.data));

      return objUrl;
    }

创建一个从这里借用的 base64 字符串：

    imgUrl(){
        const intArray = new Uint8Array(this.item.image.data);
        const reducedArray = intArray.reduce((data, byte) => data + String.fromCharCode(byte), '');

        const base64String = `data:image/png;base64, ${btoa(reducedArray)}`;


        return base64String;
    }

创建一个新对象Uint8Array，然后获取一个 objectUrl（从这里借用）：

imgUrl(){
  const arrayBuffer = new Uint8Array(this.item.image);
  const blob  = new Blob([arrayBuffer], {type: "image/png"});

  return window.URL.createObjectURL(blob);

}

在所有情况下（包括使用 FileReader 的一些尝试），我都会收到损坏的图像。不过，我没有在控制台中收到错误消息。

我认为问题在于我没有向数据库提交正确的数据。

我正在发送一个 Ajax 请求，该请求将文件附加为属性，我可能应该将其转换为 ¿ 其他东西？

Answer 1

首先，确保您获得有效的base64字符串：https ://codebeautify.org/base64-to-image-converter

Item然后尝试为模型定义一个 getter

const Item = sequelize.define('item', {
    ...
    image: {
        type: Sequelize.BLOB('long'),
        allowNull: true,
        get () { // define a getter
            const data = this.getDataValue('image')
            return data ? data.toString('base64') : ''
        },
        set(val) {
          this.setDataValue('image', val);
        }
    },
    ...
}

计算属性

imgURL () {
    return this.item.image
        ? 'data:image/png;charset=utf-8;base64,' + this.item.image 
        : '' // some default image

}