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