Node+express框架圖片上傳

1.創建表單提交upload.html文件

<form action='/upload' method='post' enctype='multipart/form-data'>
    頭像：<input type='file' name='userImg'/><br/>
    <input type='submit' value='上傳頭像'/>
    <!-- 
    使用file上傳圖片的注意事項：
        1. method上傳方式必須是post
        2. enctype='multipart/form-data'
    -->
</form>

2.創建處理文件upload.js

// 引入express
let express=require('express');
let app=new express();
// 引入body-parser中間件
let bodyParser=require('body-parser');
// 引入 formidable中間件
let formidable=require('formidable');
// 文件操作
let fs=require('fs');
let path=require('path');

// 處理post數據的提交
app.use(bodyParser.urlencoded({extended:false})); 
// 配置靜態資源路徑
app.use(express.static(path.join(__dirname,'upload')));

// 路由
// 訪問 / ，跳轉到upload.html
app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/3.upload.html');
})

// 處理post圖片上傳上來的數據
app.post('/upload',(req,res)=>{
    // 圖片上傳操作
    let form=new formidable.IncomingForm();
    form.parse(req,(err,files,file)=>{
        // console.log(files);
        // console.log(file);
        /* 1.上傳[將圖片從本地，上傳到服務器]
        獲取文件所在的位置 - 讀取的管道流 - 管道流寫的方式寫進去 - 管道流
        */
        let read=fs.createReadStream(file.userImg.path);
        // 寫入的時候，文件夾的名稱如果不存在，則會寫入失敗；需要手動創建
        let write=fs.createWriteStream('./upload/'+file.userImg.name);
        read.pipe(write); // pipe 管道傳輸

        // 2.把圖片的路徑寫入到 user-info 表中，數據庫的更新操作

        // 3. 上傳完成之後查看圖片
        res.send('<img src="./'+file.userImg.name+'" width="200">'); 
    })
})

// 設置端口
app.listen(3000);