node.js框架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(8080);

3.訪問測試

nodemon upload.js

這樣就可以進行文件上傳了,文件上傳的時候是上傳到服務器中,如果想要存在數據庫中,只需要把文件的名稱存在數據庫中就可以了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM