demo准備：mysql5.7.20 express4.0 處理圖片文件的中間件Multer
-
先搭建服務器並展示html頁面
const express = require("express");
const app = express();
app.engine('html',require("html-art-template")) // 安裝解析html文件的模板引擎，cnpm i html-art-template -S
app.get("/",(req,res)=>{
res.render("file.html")
})
app.listen(3001)
-
引入mysql和Multer
const mysql = require("mysql");
const multer = require("multer");
const upload = multer({dest:"uploads/"}) // 指定圖片的存儲位置
var connmysql = mysql.createConnection({
host:"127.0.0.1",
port:"3306",
user:"root",
password:"2232723904",
database:"picture"
})
connmysql.connect()
-
接受客戶端傳過來的圖片文件使用post
const bodyParse = require("body-parse"); // 處理post請求的中間件
const fs = require（"fs"); // 讀寫文件的模塊
const path = require("path") // 處理路徑的模塊
app.use(bodyParse.urlencoded({
extended:false // 這里是返回數據為false則是對象或者數組形式，為true則為任意數據類型
}))
app.use(bodyParse.json()) // 指定post請求的數據為json數據
app.post('/picture',upload.single("imges"),(req,res)=>{
var imges = req.file;
fs.readFile(imges.path,(err,data)=>{ // 寫入文件
if(err){
console.log(err,"圖片讀取失敗")
return
}
var imgesori = imges.originalname; // 圖片名稱
var radname = Date.now()+parseInt(Math.random()*999)+parse(Math.random()*666) // 賦給圖片的名稱用時間戳+隨機數獲取
var oriname = imgesori.lasrIndexof(".");
var hzm = imgesori.substring(oriname,imgesori.length) // 圖片后綴名
var pic = radname+pic // 拼接處一個完整的圖片名稱
fs.wrireFile(path.join(__dirname:'./public/image'+pic),data,(err) =>{
if(err){
console.log(err,"圖片寫入失敗")
}
res.send({code:-1,msg:"圖片上傳失敗"})
return
// 將圖片的路徑保存到數據庫
var picPath = "http://localhost:3001/public/image/"+pic
var insertPic = "insert into pic_table(pic_router) values('"+picPath+"')"
connmysql.query(insertPic,(err,result)=>{
if(err){
console.log(err,"圖片路徑儲存數據庫失敗")
}
res.send({code:200,msg:"圖片上傳成功",urls:picPath })
})
})
})
})
-
客戶端頁面
<body>
<div class="outbox">
<div class="skbox">
<a href="javascript:void(0)">上傳<input type="file" name="pic" id="pic"
accept="image/jpeg,image/jpg,image/png,image/svg"></a>
</div>
<span></span>
<div class="imgbox"><img></div>
</div>
</body>
-
ajax部分
$(function(){
// 封裝ajax函數
function update(url, formdata, callback) {
$.ajax({
url: url,
type: "POST",
data: formdata,
dataType: "json",
processData: false, // jQuery不要去處理發送的數據
contentType: false,
success: function (data) {
callback(data)
},
error: function (err) {
console.log("服務器錯誤！", err);
$("span").text("服務器錯誤,請重新上傳！")
}
})
}
// 執行input時間時調用
$("input").change(function () {
var imgSize = 4000000
var zzz = /\.(jpg|png|jpeg|bmp)/i
var str = this.files[0].name
var sizes = this.files[0].size
var last = str.lastIndexOf('.')
var jq = str.substring(last, last.length).toLowerCase();
if (zzz.test(jq) && sizes <= imgSize) {
var url = "/picture"
var imgFiles = $("#pic")[0].files[0]
var formdata = new FormData()
formdata.append("imges", imgFiles)
update(url, formdata, function (data) {
console.log(data)
if (data.code < 0) {
$("span").text(data.msg)
}
$("span").text(data.msg)
var localsto = window.localStorage
localStorage.setItem("src", data.urls)
$('.imgbox img').attr('src', localsto.src);
})
} else {
alert("請選擇一張正確的圖片並且大小不能大於4M")
}
})
// 將服務端返回的數據保存在localStorage中
window.onload = function(){
var localsto = window.localStorage
$('.imgbox img').attr('src', localsto.src);
}
})
-
服務端完整app.js
const express = require('express')
const app = express()
const mysql = require("mysql")
const os = require("os")
const multer = require("multer")
const upload = multer({
dest: 'uploads/'
})
const bodyParser = require("body-parser")
const fs = require("fs")
const path = require("path")
var connsql = mysql.createConnection({
host: "127.0.0.1",
port: "3306",
user: "root",
password: "2232723904",
database: "picture",
})
connsql.connect()
app.engine('html', require('express-art-template'))
app.use('/public/', express.static('./public/'))
app.use(bodyParser.urlencoded({
extended: false
}))
app.use(bodyParser.json())
app.get('/', (req, res) => {
res.render('file.html')
})
app.post('/picture', upload.single('imges'), (req, res) => {
var imges = req.file
fs.readFile(imges.path, (err, data) => {
if (err) {
console.log("圖片上傳失敗")
return;
}
var imgesori = imges.originalname
var radname = Date.now() + parseInt(Math.random() * 999)
var oriname = imgesori.lastIndexOf('.')
var hzm = imgesori.substring(oriname, oriname.length)
var pic = radname + hzm
fs.writeFile(path.join(__dirname, './public/image/' + pic), data, (err) => {
if (err) {
console.log("圖片寫入失敗！")
res.send({
code: -1,
msg: "圖片上傳失敗！"
})
return
}
const couter = os.networkInterfaces()
for (var cm in couter) {
var cms = couter[cm]
}
var picPath = "http://"+cms[1].address + ':3001' + '/public/image/' + pic
var insertPic = "insert into pic_table(pic_router) values('" + picPath + "')"
connsql.query(insertPic, (err, result) => {
if (err) {
console.log("保存到數據庫失敗！")
}
res.send({
code: 200,
msg: "圖片上傳成功",
urls: picPath
})
})
})
})
})
app.listen(3001)
ps：app.js中的路徑時通過node中提供的os模塊獲取到的
demo地址：https://github.com/dillonleader/Upload-pictures