记录一下在做项目过程中实现图片保存到数据库，并且可以修改图片的功能

先来说说怎么简单实现图片上传到服务器这个功能

文件夹摆放

nodejs部分

先在app文件夹的创建index.js，在其中定义一个路由（为了更好的模块化处理，直接用app.post也行）

const express = require('express')
const app = express()
const cors = require('cors')
const port = 3001
app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
/* 使用图片路由 */
const imgRouter = require("../router/images.js");
app.use("/api", imgRouter);

然后在router文件夹中创建一个images.js

其中代码如下


const express = require("express");
const router = express.Router();
// 引入multer
const multer = require("multer")
const fs=require("fs")
//导入数据库
const db = require("../database/index");
//图片上传
router.post(
    "/imgload",
    multer({
      //设置文件存储路径
      dest: "public/images",
    }).array("file", 1),
    function (req, res, next) {
      console.log(req.body,"req.bodyreq.bodyreq.bodyreq.body");
      let files = req.files;
      let file = files[0];
      let fileInfo = {};
      file.originalname = Buffer.from(file.originalname, "latin1").toString(
        "utf8"
      );
      let path = "public/images/" + Date.now().toString() + file.originalname;
      fs.renameSync("./public/images/" + file.filename, path);
      console.log(path);
      
      db.query()

      //获取文件基本信息
      fileInfo.type = file.mimetype;
      fileInfo.name = file.originalname;
      fileInfo.size = file.size;
      fileInfo.path = path;
      res.send({
        code: 200,
        msg: "OK",
        data: fileInfo,
      });
    }
)


module.exports = router;

其中代码中有设置文件存储路径dest: "public/images"，这个文件夹你可以先创建也可以不创建，他会自动帮你创建，他接收的图片会在app文件夹中显示出来，如果报错没有此文件夹，你可以先创建

vue部分

使用element-ui中的Upload 上传组件，我的版本是2.8.2

 <template>
    <div>
    <el-upload
            class="upload-demo"
            ref="upload"
            action='http://localhost:3001/api/imgload'
            :data="form"
            :on-preview="handlePreview"
            :auto-upload="false"
            :on-success="handleUploadSuccess"
           
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
    </el-upload>
    <el-button type="primary" @click="submit">确 定</el-button>

    </div>
</template>
export default{
methods:{
    submit(){
 this.$refs.upload.submit();
}
}
    
}

其中action是后端接口图片上传修改都可以通过这个接口处理,点击确定按钮，图片就会上传到服务器，还可以设置成功上传的回调函数，这个具体查看官网说明文档

这时候我们可以看到后端控制台中有上传的文件路径

​

和在public/images有如下图片，图片名字为什么这么奇怪，因为代码中加上了时间戳函数，你也可以加上自己的东西。

​

 自此，我们完成了图片上传到服务器的方法

接下来我们怎么把图片插入数据库呢，在这里我的方法是把图片名称和后缀加入的数据库中（这个方法有局限性，后期如果遇到好点的方法再更新，现在先来实现效果）

在images.js我们遗留下了一个db.query(),这个是用来执行数据库语句的，先在app数据库下创建images表

​

在database的index.js文件中我们定义数据库，xxx为你自己的数据库属性

const mysql = require("mysql");
const db = mysql.createPool({
    host: "xxxx",
    user: "xxx",
    password: "xxx",
    database: "app",
    multipleStatements: true
})

module.exports = db;

 配置好后，我们在image.js中加入数据库语句，images.js代码更新如下


const express = require("express");
const router = express.Router();
// 引入multer
const multer = require("multer")
const fs=require("fs")
//导入数据库
const db = require("../database/index");
//图片上传
router.post(
    "/imgload",
    multer({
      //设置文件存储路径
      dest: "public/images",
    }).array("file", 1),
    function (req, res, next) {
      console.log(req.body,"req.bodyreq.bodyreq.bodyreq.body");
      let files = req.files;
      let file = files[0];
      let fileInfo = {};
      file.originalname = Buffer.from(file.originalname, "latin1").toString(
        "utf8"
      );
      let path = "public/images/" + Date.now().toString() + file.originalname;
      fs.renameSync("./public/images/" + file.filename, path);
      console.log(path);
      let sql=`insert into images (imagesname) VALUES ('${path}');`
      db.query(sql)

      //获取文件基本信息
      fileInfo.type = file.mimetype;
      fileInfo.name = file.originalname;
      fileInfo.size = file.size;
      fileInfo.path = path;
      res.send({
        code: 200,
        msg: "OK",
        data: fileInfo,
      });
    }
)


module.exports = router;

在前端页面提交图片，刷新数据库，效果如下

​

​

自此我们完成了，图片路径存放数据库的操作

接下来说说在项目中经常使用到的功能就是上传图片的

如何修改图片？

先来说说我的实现思路吧，前面我们已经实现了图片上传和存放数据库的功能，一般我们把图片和用户的唯一标识（用户编号）放在一个表里面，这样我们可以通过sql的updata语句来实现修改用户的图片的操作。

那怎么把图片显示到用户的界面呢？

通过挂载静态资源路径访问服务器的文件夹，前面上传图片时候服务器创建了public/images文件夹，在里面存放了我们上传的图片，在前端里面我们可以通过拼接src路径来实现图片的显示。假如你上传的图片携带了参数如用户编号（如何携带参数，element-ui的Upload组件有说明），我们可以重写一下存放到数据库的图片名称

在images.js执行sql语句之前可以加上以下语句

let imgName=req.body.userId+fileInfo.name

这样我们就可以获得，如123图像.jpg的图片路径存放到数据库

使用nodejs的express进行静态资源挂载

app.use("/api/images", express.static("./public/images"));
app.get("/api/images/:filename", (req, res) => {
  const filename = req.params.filename;
  const imagePath = path.join(__dirname, "public/images", filename);

  fs.access(imagePath, fs.constants.F_OK, (error) => {
    if (error) {
      // 图片不存在，返回404状态码
      res.status(404).send("图片不存在");
    } else {
      // 图片存在
      res.status(200).send("图片存在");
    }
  });
});

在前端获取图片可以src动态拼接

<img :src="挂载静态资源路径 + 请求回来带图片的数据名称" style="width: 100%;height: 100%;"/>

挂载静态资源路径即上面代码中的/api/images，通过http://api/imageshttp://127.0.0.1//123.png即可访问到图片，前端请求只需要把图片名称返回即可。

如果有更加好的方法可以和我交流一下，我这个属于笨方法，哈哈哈

完结撒花！！！！

# vue.js # javascript # 前端 # 数据库 # 前端框架
Logo
亚马逊云科技技术品牌专区

更多推荐

cover

企业物联网平台如何选择？

avatar 亚马逊云科技技术品牌专区

STM32节点移植lorawan协议连接腾讯云物联网开发平台（IoT Explorer）

STM32移植lorawan协议连接腾讯云物联网开发平台（IoT Explorer）前言前言在移植协议之前，先给大家科普一下Lora 和 lorawan 的区别。LoRa 是LPWAN通信技术中的一种，是美国Semtech公司采用和推广的一种基于扩频技术的超远距离无线传输方案。这一方案改变了以往关于传输距离与功耗的折衷考虑方式为用户提供一种简单的能实现远距离、长电池寿命、大容量的系统，进而扩...

avatar 亚马逊云科技技术品牌专区

从华为的MQTT到TdEngineRPC，解读物联网时代的分布式

今天中秋节，笔者首先祝各位读者们中秋快乐，之所以在今天这个团圆节来谈分布式的话题，就是要聊聊物联网是如何通过MQTT连接各类终端，如何通过RPC整合各种数据的。下面就通过代码+动图的方式来解读一下华为LiteOS的MQTT与TD的RPC。MQTT协议MQTT是一个客户机服务器发布/订阅消息传输协议。它重量轻、开放、简单、易于实现。这些特性使其非常适合在物联网的低带宽、...

avatar 亚马逊云科技技术品牌专区