Express系列之multer

時間 2019-12-08

標籤 express 系列 multer 简体版

原文原文鏈接

這兩天在看《nodejs權威指南》，這本書看了很久了，可是讀的一直不細，此次纔好好看了一遍。html

收穫仍是蠻多的，主要在於wenpack使用的一些細節問題，有點茅塞頓悟的體驗吧，另外在node上也再也不一臉懵逼了。不過說實話，以如今的水平向直接使用node作點什麼仍是挺難的，今天測試了下連接mongodb和mysql數據庫，雖然能使用，但仍是怪怪的。因此就想先使用現有的框架，再反推學習node。node

框架的話就選了這個express.mysql

主要就是測試了幾個書裏提到的中間件，書寫的有些早，不少api都過期了，照着官網一點一點找更新的地方看。jquery

目前以爲對我有用的是：multer和static。ajax

後者能夠在本地調試頁面，對於手機頁面尤爲有用。sql

此次主要說一下multer，我並無實現全部的功能，只是實現單圖片上傳這一個功能，其餘的再摸索嘍。mongodb

這是文件的整個目錄，主要就兩個，一個是根目錄下的main.js，還有一個是public/index.html。數據庫

放代碼：express

//main.js
let express = require('express');

var multer  = require('multer')

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'public/');
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + '.png');
    }
  })
  
var upload = multer({ storage: storage })

//var upload = multer({ dest: 'public/' })
  

let app = express()

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

app.post('/public/index.html',upload.single('myfile'),(req,res,next)=>{
    console.log(req.file)
    res.send(req.file)
})

app.listen(3300,'127.0.0.1')

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file" id="file" accept="image/*">
    <div id="result"></div>
    <img src="" alt="" id="img" width="40" height="40">
    <script>
        let file = document.getElementById('file');
        file.onchange = function (e) {
            let file = e.target.files[0];
            let xhr = new XMLHttpRequest();
            let fd = new FormData();
            fd.append('myfile', file)
            xhr.open('post', '/public/index.html')
            xhr.onload = function () {
                // console.log(xhr)
                if (xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    document.getElementById('result').innerHTML = this.response
                    document.getElementById('img').src = data.filename
                }
            }
            xhr.send(fd)
        }
    </script>
</body>

</html>

不想引用jquery庫，我就原生寫的ajax，總的來講應該沒什麼難的，總之就是點擊按鈕選擇完圖片以後，會將圖片的信息放在一個鍵名爲myfile的對象中，傳給後臺。api

express把接受到的圖片存儲在/public/文件下，這裏有個小小的坑。能夠看到我在main.js註釋了這樣一行代碼：

var upload = multer({ dest: 'public/' })

其實最開始的時候我用的就是這一行代碼，dest的意思是選擇一個路徑去存儲文件，可是這樣寫有一個小小的問題，存入進來的文件是沒有後綴名的。

我在向前臺返回數據的時候

res.send(req.file)

這個問題就很嚴重，好比一個場景是我上傳一張圖片作頭像，可是等我下次進入本身的我的頁面，後臺給我返回的數據沒有辦法做爲圖片的地址使用，這就很麻煩了。因此在網上找了一個緣由，就把上面的代碼註釋換成了這個：

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'public/');
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + '.png');
    }
})

var upload = multer({ storage: storage })

destination是文件存儲的地址，filename設置的是文件的名字，那在這裏若是寫成這種：

filename: function (req, file, cb) {
  cb(null, file.fieldname + '.png');
}

你會發現你傳入的每一張圖片的名字都是myfile.png，新的覆蓋舊的。因此爲了能保存傳入的全部圖片，我就使用Date.now()做爲每張圖片不一樣的識別符，這樣就不會再出現覆蓋的狀況。

目前就這樣，下次弄出來了多圖片上傳我再接着更新。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。