vue2+element-ui+nodejs實現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫的方法

更新時間：2024年04月12日 09:27:14 作者：至尊雞

在Web開發(fā)中經(jīng)常需要使用圖片,有時候需要對圖片進行上傳,這篇文章主要給大家介紹了關于vue2+element-ui+nodejs實現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

nodejs部分

先在app文件夾的創(chuàng)建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文件夾中創(chuàng)建一個images.js

其中代碼如下

const express = require("express");
const router = express.Router();
// 引入multer
const multer = require("multer")
const fs=require("fs")
//導入數(shù)據(jù)庫
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"，這個文件夾你可以先創(chuàng)建也可以不創(chuàng)建，他會自動幫你創(chuàng)建，他接收的圖片會在app文件夾中顯示出來，如果報錯沒有此文件夾，你可以先創(chuàng)建

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是后端接口圖片上傳修改都可以通過這個接口處理,點擊確定按鈕，圖片就會上傳到服務器，還可以設置成功上傳的回調(diào)函數(shù)，這個具體查看官網(wǎng)說明文檔

這時候我們可以看到后端控制臺中有上傳的文件路徑

?和在public/images有如下圖片，圖片名字為什么這么奇怪，因為代碼中加上了時間戳函數(shù)，你也可以加上自己的東西。

自此，我們完成了圖片上傳到服務器的方法

接下來我們怎么把圖片插入數(shù)據(jù)庫呢，在這里我的方法是把圖片名稱和后綴加入的數(shù)據(jù)庫中（這個方法有局限性，后期如果遇到好點的方法再更新，現(xiàn)在先來實現(xiàn)效果）

在images.js我們遺留下了一個db.query(),這個是用來執(zhí)行數(shù)據(jù)庫語句的，先在app數(shù)據(jù)庫下創(chuàng)建images表

?在database的index.js文件中我們定義數(shù)據(jù)庫，xxx為你自己的數(shù)據(jù)庫屬性

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

module.exports = db;

配置好后，我們在image.js中加入數(shù)據(jù)庫語句，images.js代碼更新如下

const express = require("express");
const router = express.Router();
// 引入multer
const multer = require("multer")
const fs=require("fs")
//導入數(shù)據(jù)庫
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;

在前端頁面提交圖片，刷新數(shù)據(jù)庫，效果如下

自此我們完成了，圖片路徑存放數(shù)據(jù)庫的操作

接下來說說在項目中經(jīng)常使用到的功能就是上傳圖片的

如何修改圖片？

先來說說我的實現(xiàn)思路吧，前面我們已經(jīng)實現(xiàn)了圖片上傳和存放數(shù)據(jù)庫的功能，一般我們把圖片和用戶的唯一標識（用戶編號）放在一個表里面，這樣我們可以通過sql的updata語句來實現(xiàn)修改用戶的圖片的操作。

那怎么把圖片顯示到用戶的界面呢？

通過掛載靜態(tài)資源路徑訪問服務器的文件夾，前面上傳圖片時候服務器創(chuàng)建了public/images文件夾，在里面存放了我們上傳的圖片，在前端里面我們可以通過拼接src路徑來實現(xiàn)圖片的顯示。假如你上傳的圖片攜帶了參數(shù)如用戶編號（如何攜帶參數(shù)，element-ui的Upload組件有說明），我們可以重寫一下存放到數(shù)據(jù)庫的圖片名稱

在images.js執(zhí)行sql語句之前可以加上以下語句

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

這樣我們就可以獲得，如123圖像.jpg的圖片路徑存放到數(shù)據(jù)庫

使用nodejs的express進行靜態(tài)資源掛載

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狀態(tài)碼
      res.status(404).send("圖片不存在");
    } else {
      // 圖片存在
      res.status(200).send("圖片存在");
    }
  });
});

在前端獲取圖片可以src動態(tài)拼接