使用nodejs+express實現(xiàn)簡單的文件上傳功能
1.建立express項目
express -e nodejs-uploadfile
2.下載multer中間件
npm i multer or yarn multer
3.在routes/index.js中引用multer,由于還要使用到文件操作,還要引用fs模塊,并指定文件上傳目錄
const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads'
單文件上傳: index.html中文件如下( form文件的類型必須為 enctype="multipart/form-data" ),
<form action="/upload" method="post" enctype="multipart/form-data"> <input name="fileUpload" type="file" /> <img src="" alt=""> <button type="submit">上傳</button> </form>
在routes/index.js里面添加upload路由用來處理上傳文件的操作
router.post('/upload', upload.single('fileUpload'), function (req, res, next) { const { file } = req; fs.readFile(file.path, function(err, data) { fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) { if (err) res.json({ err }) res.json({ msg: '上傳成功' }); }); }) })
如果上傳的文件是圖片的話,還可以使用FileReader對象實現(xiàn)圖片預(yù)覽
(function($){ $('input').on('change', function(event) { var files = event.target.files, reader = new FileReader(); if(files && files[0]){ reader.onload = function (ev) { $('img').attr('src', ev.target.result); } reader.readAsDataURL(files[0]); } }) }(jQuery))
多文件上傳: 多文件上傳的原理和單文件上傳的原理一樣,代碼如下:
router.post('/upload', upload.array('fileUpload'), function (req, res, next) { const files = req.files; const response = []; const result = new Promise((resolve, reject) => { files.map((v) => { fs.readFile(v.path, function(err, data) { fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) { const result = { file: v, } if (err) reject(err); resolve('成功'); }) }) }) }) result.then(r => { res.json({ msg: '上傳成功', }) }).catch(err => { res.json({ err }) }); })
相關(guān)代碼在 github.com/bWhirring/n…
總結(jié)
以上所述是小編給大家介紹的使用nodejs+express實現(xiàn)簡單的文件上傳功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- node+axios實現(xiàn)服務(wù)端文件上傳示例
- 利用node+koa+axios實現(xiàn)圖片上傳和回顯功能
- 詳解Vue+axios+Node+express實現(xiàn)文件上傳(用戶頭像上傳)
- nodejs+express實現(xiàn)文件上傳下載管理網(wǎng)站
- nodejs基于express實現(xiàn)文件上傳的方法
- 詳解nodejs實現(xiàn)本地上傳圖片并預(yù)覽功能(express4.0+)
- Nodejs+express+html5 實現(xiàn)拖拽上傳
- 基于nodejs+express(4.x+)實現(xiàn)文件上傳功能
- 使用express+multer實現(xiàn)node中的圖片上傳功能
- Ajax異步文件上傳與NodeJS express服務(wù)端處理
- Nodejs進階:基于express+multer的文件上傳實例
- NodeJS實現(xiàn)圖片上傳代碼(Express)
- node+express+axios實現(xiàn)單文件上傳功能
相關(guān)文章
Node.js中,在cmd界面,進入退出Node.js運行環(huán)境的方法
今天小編就為大家分享一篇Node.js中,在cmd界面,進入退出Node.js運行環(huán)境的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請求的教程
Mock.js這個JavaScript庫最常見的用法便是被用來攔截AJAX請求,well,這里我們就來看一下Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請求的教程:2016-05-05在Node.js中使用Express框架和Mongoose庫實現(xiàn)視頻評論功能
本文我們將詳細介紹如何在Node.js應(yīng)用中使用Express框架和Mongoose庫來實現(xiàn)一個視頻評論功能,這個功能允許用戶對視頻內(nèi)容添加評論,并將評論數(shù)實時更新,以下是逐步的實現(xiàn)過程,包括代碼示例和說明,需要的朋友可以參考下2024-04-04