nodejs+express(4.x+)實現檔案上傳功能
基於Nodejs的官方Web開發庫Express也在同步發展著,每年升級一個大版本,甚至對框架底層都做了大手術。在Express4時,替換掉中件間庫connect,而改用多個更細粒度的庫來取代。帶來的好處是明顯地,這些中介軟體能更自由的更新和釋出,不會受到Express釋出週期的影響;但問題也是很的棘手,不相容於之前的版本,升級就意味著要修改程式碼。
實現上傳的方式有:
1.express中介軟體multer模組(此效率最高,在express3.x原生支援,到了express4.x獨立成一個模組了)。
2.connect-multiparty模組(但現在 官方不推薦 )。
3.使用multiparty模組實現(此方法比較普遍)。
4.使用formidable外掛實現(外掛呢,就是簡單易懂)。
通過“connect-multiparty”中介軟體實現上傳:
通過在專案中npm install connect-multiparty進行安裝。
使用方法:
[JavaScript] 純文字檢視 複製程式碼var multipart = require('connect-multiparty'); var multipartMiddleware = multipart(); app.post('/upload', multipartMiddleware, function(req, resp) { console.log(req.body, req.files); // don't forget to delete all req.files when done });
上傳後,上傳的檔案會在臨時目錄中生成一個臨時檔案,具體可將req.files列印出檢視具體檔案路徑。
只要在註釋的地方將臨時檔案移動並重新命名到實際目錄中即可完成上傳功能。
官方地址:https://www.npmjs.com/package/connect-multiparty。
下面就用“multiparty”實現一個版本:
1.使用express(版本是4.11.x)建立一個專案,採用預設的jade作為模版引擎。
2.在專案目錄中,通過npm install multiparty進行安裝必要元件。
3.修改views/index.jade,如下做一個簡單的用於檔案上傳的form。
[JavaScript] 純文字檢視 複製程式碼extends layout block content form(method='post', action='/file/uploading', enctype='multipart/form-data') input(name='inputFile', type='file', multiple='mutiple') input(name='btnUp', type='submit',value='上傳')
4.修改routes/index.js,實現上傳頁面和上傳響應的後臺程式碼。
[JavaScript] 純文字檢視 複製程式碼var express = require('express'); var router = express.Router(); var multiparty = require('multiparty'); var util = require('util'); var fs = require('fs'); /* 上傳頁面 */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); /* 上傳*/ router.post('/file/uploading', function(req, res, next){ //生成multiparty物件,並配置上傳目標路徑 var form = new multiparty.Form({uploadDir: './public/files/'}); //上傳完成後處理 form.parse(req, function(err, fields, files) { var filesTmp = JSON.stringify(files,null,); if(err){ console.log('parse error: ' + err); } else { console.log('parse files: ' + filesTmp); var inputFile = files.inputFile[]; var uploadedPath = inputFile.path; var dstPath = './public/files/' + inputFile.originalFilename; //重新命名為真實檔名 fs.rename(uploadedPath, dstPath, function(err) { if(err){ console.log('rename error: ' + err); } else { console.log('rename ok'); } }); } res.writeHead(, {'content-type': 'text/plain;charset=utf-'}); res.write('received upload:\n\n'); res.end(util.inspect({fields: fields, files: filesTmp})); }); }); module.exports = router;
相關文章
- 使用nodejs+express完成簡單的檔案上傳功能NodeJSExpress
- 自定義檔案上傳功能實現方法
- 【node】檔案上傳功能簡易實現
- SpringBoot實現檔案上傳功能詳解Spring Boot
- 使用Spring Boot實現檔案上傳功能Spring Boot
- ajax實現檔案上傳
- PHP實現單檔案、多檔案上傳 封裝 物件導向實現檔案上傳PHP封裝物件
- SpringCloudGateway閘道器服務實現檔案上傳功能SpringGCCloudGateway
- 教你如何實現c#檔案上傳下載功能C#
- .net web core 如何編碼實現檔案上傳功能Web
- 前端頁面上實現表單提交檔案上傳功能前端
- Vue實現多檔案上傳功能(前端 + 後端程式碼)Vue前端後端
- 檔案上傳原理和實現
- 使用Spring實現上傳檔案Spring
- Spring mvc檔案上傳實現SpringMVC
- HttpFileCollection 實現多檔案上傳HTTP
- 通過配置檔案(.htaccess)實現檔案上傳
- 使用java的MultipartFile實現layui官網檔案上傳實現全部示例,java檔案上傳JavaUI
- js實現帶上傳進度的檔案上傳JS
- 關於node實現檔案上傳
- PHP實現圖片(檔案)上傳PHP
- Feign實現檔案上傳下載
- Java檔案上傳如何實現呢?Java
- SpringMVC多個檔案上傳實現SpringMVC
- golang實現檔案上傳並轉存資料庫功能詳解Golang資料庫
- Linux如何實現斷點續傳檔案功能?Linux斷點
- SpringBoot專案實現檔案上傳和郵件傳送Spring Boot
- Spring Cloud Feign的檔案上傳實現SpringCloud
- node中間層實現檔案上傳
- SpringMVC實現多檔案上傳原始碼SpringMVC原始碼
- SpringMVC實現檔案上傳&下載(2)SpringMVC
- python+selenium+autoit實現檔案上傳Python
- struts動態多檔案上傳實現
- JAVA實現大檔案分片上傳斷點續傳Java斷點
- springboot整合百度富文字編輯器ueditor實現圖片上傳和檔案上傳功能Spring Boot
- 前端實現檔案下載和拖拽上傳前端
- JavaScript+PHP實現影片檔案分片上傳JavaScriptPHP
- 使用spring-webmvc6實現檔案上傳SpringWebMVC
- React中使用fetch實現檔案上傳下載React