使用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中的http.response.addTrailers方法使用說明
這篇文章主要介紹了node.js中的http.response.addTrailers方法使用說明,本文介紹了http.response.addTrailers的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
nodejs實現(xiàn)遍歷文件夾并統(tǒng)計文件大小
這篇文章主要介紹了nodejs實現(xiàn)遍歷文件夾并統(tǒng)計文件大小,下面使用nodejs的遍歷文件夾文件內(nèi)容,并且讀取所有的文件,并采取排序往大到小的順序進行輸出,需要的朋友可以參考下2015-05-05
node 標(biāo)準(zhǔn)輸入流和輸出流代碼實例
這篇文章主要介紹了node 標(biāo)準(zhǔn)輸入流和輸出流代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
node如何實現(xiàn)cmd彈窗交互之inquirer
這篇文章主要介紹了node如何實現(xiàn)cmd彈窗交互之inquirer問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10

