记录一下在做项目过程中实现图片保存到数据库,并且可以修改图片的功能
先来说说怎么简单实现图片上传到服务器这个功能
文件夹摆放
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即可访问到图片,前端请求只需要把图片名称返回即可。
如果有更加好的方法可以和我交流一下,我这个属于笨方法,哈哈哈
完结撒花!!!!