? ? ? ? 前段時(shí)間用Node.js: express + MySQL + Vue + element組件做了一個(gè)小項(xiàng)目，記錄一下圖片上傳的實(shí)現(xiàn)。

? ? ? ? 將圖片存入數(shù)據(jù)庫(kù)有兩種方法：

? ? ? ? ? ? ? ? 1，將圖片以二進(jìn)制流的方式存入數(shù)據(jù)庫(kù)（數(shù)據(jù)庫(kù)搬家容易，比較安全，但數(shù)據(jù)庫(kù)空間的消耗大，訪問會(huì)比較緩慢）

? ? ? ? ? ? ? ? 2，將圖片的存放地址存入數(shù)據(jù)庫(kù)

? ? ? ? 主要介紹第二種。

一，將圖片以二進(jìn)制流的方式存入數(shù)據(jù)庫(kù)

? ? ? ? 將圖片轉(zhuǎn)成base64格式，數(shù)據(jù)類型使用MEDIUMTEXT類型。

? ? ? ? ?或者將圖片轉(zhuǎn)為保存到數(shù)據(jù)庫(kù)的Blob類型中。

二，將圖片的存放地址存入數(shù)據(jù)庫(kù)中。

1，編寫接口url

? ? ? ? 會(huì)運(yùn)用到一個(gè)中間件，Multer，用于處理?multipart/form-data?類型的表單數(shù)據(jù)，它主要用于上傳文件 ：multer/README-zh-cn.md at master · expressjs/multer · GitHub

? ? ? ? Multer會(huì)添加一個(gè)body對(duì)象以及file或files對(duì)象到request對(duì)象中，body對(duì)象包含表單的文本域信息，file對(duì)象包含對(duì)象表單上傳的文件信息。

（router和router_handle兩個(gè)文件夾的意思是，將路徑和執(zhí)行方法分開，方便管理，具體內(nèi)容可以查看??Node.js: express + MySQL的使用_express mysql_掉頭發(fā)類型的選手的博客-CSDN博客）

router下的文件

//引入multer
const multer = require('multer')
//磁盤存儲(chǔ)引擎，可以控制文件的存儲(chǔ)，省略的話這些文件會(huì)保存在內(nèi)存中，不會(huì)寫入磁盤
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        //控制文件的存儲(chǔ)路徑
        cb(null, 'image/avatar')
    },
    filename: function (req, file, cb) {
        //定義上傳文件存儲(chǔ)時(shí)的文件名
        cb(null, file.originalname)
    }
})
const upload = multer({ storage: storage })
//接受單文件上傳
router.post('/update/avatar', upload.single('avatar'), userInfo_handler.updateAvatar)

? ? ? ? 首先引入multer，配置圖片的存儲(chǔ)地址和文件名，省略的話上傳的文件會(huì)保存在內(nèi)存中，不會(huì)寫入磁盤，在上傳前要在項(xiàng)目的根目錄下創(chuàng)建一個(gè)文件夾用于接收上傳的文件，比如，我的代碼中定義文件的存儲(chǔ)路徑為? cb(null, 'image/avatar')? ，要在目錄下創(chuàng)建一個(gè)image文件夾，再在image文件夾下創(chuàng)建一個(gè)avatar文件夾。

? ? ? ? 定義文件存儲(chǔ)時(shí)的文件名一般會(huì)使用時(shí)間戳作為文件名，防止上傳的文件重復(fù)（我這兒沒有使用時(shí)間戳）。?

????????upload.single('avatar') 表示接受單文件上傳，avatar代表上傳文件時(shí)的參數(shù)字段。多文件上傳使用?.array(fieldname[, maxCount]) ，maxCount來(lái)限制最大的上傳數(shù)量。

router_handler文件下的處理函數(shù)

exports.updateAvatar = (req, res) => {
    // 定義更新頭像的sql
    const sql = 'update users set avatar=? where id=?;'
    // console.log(req);
    // console.log(req.body.id)
    // console.log(req.file);
    // console.log(req.file.destination);
    const avatarUrl = `http://127.0.0.1:3007/${req.file.destination.split('/')[1]}/${req.file.originalname}`
    // console.log(avatarUrl);
    // 執(zhí)行sql語(yǔ)句
    db.query(sql, [avatarUrl, req.body.id], (err, results) => {
        // sql語(yǔ)句執(zhí)行錯(cuò)誤
        if(err) return res.cc(err)
        // sql語(yǔ)句執(zhí)行成功，但影響的條數(shù)部位1屬于執(zhí)行失敗
        if(results.affectedRows !== 1) return res.cc('更換頭像失??！')
        // 更換頭像成功
        res.cc('更換頭像成功！', 0)
    })
}

傳回的request

?

????????這時(shí)使用 req.file取到上傳的圖片信息，req.body取到其他上傳的數(shù)據(jù)。

? ? ? ? 然后處理圖片路徑，圖片路徑根據(jù)自己項(xiàng)目的實(shí)際情況進(jìn)行處理。最后執(zhí)行sql語(yǔ)句，存入數(shù)據(jù)庫(kù)。

? ? ? ? 接口處理完畢。

? ? ? ? 要想在瀏覽器中通過路徑訪問圖片還需要在? app.js 這個(gè)文件中加入

app.use(express.static('image'))

? ? ? ? 將整個(gè)image文件夾轉(zhuǎn)為靜態(tài)文件。

2，編寫前端代碼

? ? ? ? 前端代碼用element組件舉個(gè)例子。使用element中上傳的組件。其中有幾個(gè)屬性是比較重要的。

? ? ? ? ?action 是請(qǐng)求的URL，如果你寫的接口需要上送token，需要配置headers，data是請(qǐng)求中除了圖片文件其他的額外參數(shù)，name是上傳圖片文件的字段，這個(gè)字段必須和定義url時(shí)的那個(gè)字段保持一致，就是下面這個(gè)字段。

?????????之后再重新請(qǐng)求數(shù)據(jù)庫(kù)中的數(shù)據(jù)，將圖片顯示在頁(yè)面上。

上傳之后

圖片的保存位置

?

數(shù)據(jù)庫(kù)中?

?這個(gè)路徑可以直接在瀏覽器中訪問

??

????????可以到下面鏈接獲取文章中的代碼。

????????鏈接: https://pan.baidu.com/s/1t7bX0Nv3kggyf7IFzEffcA 提取碼: 0000文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-471374.html

到了這里，關(guān)于Node.js: express + MySQL + Vue實(shí)現(xiàn)圖片上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！