小编pac*_*aux的帖子

我在前端使用 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]); …