首页 > 解决方案 > 使用 axios 和 express.js 在 vue.js 中将 mysql blob 字段显示为图像/文件

问题描述

我正在使用express.js将图像和 pdf 文件存储到Mysql数据库中。现在我正在寻找通过 img 标签和 pdf 文件在 vueJs 代码中显示图像(我正在使用nuxt.js),我真的被困住了我已经尝试了所有方法但没有任何效果......我的表格文件:

id : autoincrement type: string name: string ddata: blob

我的控制器:

                module.exports.liste = function (req, res, next) {
                    con.query("SELECT * FROM files", function (err, results, fields) {
                   if (err) {
                        return res.status(500).json({
                            message: 'Error getting records.',
                            err: er`
                        });
                    }

           if (results.length > 0) {
                return res.json(results);
            } else {
                return res.json([]);
            }
        });
   }

我得到这样的数据:

async asyncData(context){
    const {data} = await context.$axios.get('/api/files')
    return {
      files : data
    }
 },

hmtl 视图:

<v-list-item v-for="file in files" :key="file.id">
            {{ file.id }}....  {{ file.type }} .... {{ file.name }}....
             <img :src="file.ddata" />
  </v-list-item>

预先感谢您的回复

标签: mysqlexpressvue.jsaxiosnuxt.js

解决方案


推荐阅读