溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“nodejs如何實現簡單的文件上傳功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“nodejs如何實現簡單的文件上傳功能”這篇文章吧。
首先需要大家看一下目錄結構，然后開始一點開始我們的小demo。
文件上傳總計分為三種方式：
1.通過flash,activeX等第三方插件實現文件上傳功能。
2.通過html的form標簽實現文件上傳功能，優點：瀏覽器兼容好。
3.通過xhr level2的異步請求，可以百度formData對象。
這里使用2做個練習。
node插件請看下package.json文件
{
"name": "upload",
"version": "0.1.0",
"description": "upload demo",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "iwang",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"connect-multiparty": "^2.0.0",
"express": "^4.14.0"
}
}dependencies中就是這次demo的依賴插件。我用的node.js是4.4.4版本的，大家可以把上面代碼替換到你的package.json文件中，執行npm install 可以自動安裝demo需要的三個依賴插件。
app.js
/**
* Created by iwang on 2017/1/15.
*/
//express使用的是@4版本的。
var express = require('express');
//form表單需要的中間件。
var mutipart= require('connect-multiparty');
var mutipartMiddeware = mutipart();
var app = express();
//下面會修改臨時文件的儲存位置，如過沒有會默認儲存別的地方，這里不在詳細描述,這個修改臨時文件儲存的位置 我在百度里查找了三四個小時才找到這個方法，不得不說nodejs真難學。//所以在這里留下我的學習記錄，以備以后翻閱。
app.use(mutipart({uploadDir:'./linshi'}));
//設置http服務監聽的端口號。
app.set('port',process.env.PORT || 3000);
app.listen(app.get('port'),function () {
console.log("Express started on http://localhost:"+app.get('port')+'; press Ctrl-C to terminate.');
});
//瀏覽器訪問localhost會輸出一個html文件
app.get('/',function (req,res) {
res.type('text/html');
res.sendfile('public/index.html')
//這里用來玩，express框架路由功能寫的，與上傳文件沒沒有關系。
app.get('/about',function (req,res) {
res.type('text/plain');
res.send('Travel about');
//這里就是接受form表單請求的接口路徑，請求方式為post。
app.post('/upload',mutipartMiddeware,function (req,res) {
//這里打印可以看到接收到文件的信息。
console.log(req.files);
/*//do something
* 成功接受到瀏覽器傳來的文件。我們可以在這里寫對文件的一系列操作。例如重命名，修改文件儲存路徑 。等等。
*
* */
//給瀏覽器返回一個成功提示。
res.send('upload success!');public/index.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/upload" enctype="multipart/form-data" method="post"> <p>附件：<input type="file" name="myfile" ></p> <p> <input type="submit"> </p> </form> </body> </html>
瀏覽器地址訪問index.html
選取文件：我選擇了一個timg.jpg的文件
點擊提交后跳轉了頁面，提示成功上傳
我們看一下，linshi名字的問價加下是否已經存在我們上傳的文件，下面的圖證明文件已經儲存在了upload_demo/linshi下面,圖片名字被改成了一個臨時命名。
我們可以在app.js中寫代碼處理我們的圖片文件了。
demo要點：
1.首先安裝好nodejs 我這里的版本為4.4.4。
2.創建一個英文命名的文件。手動，或使用npm init創建一個package.json文件。把上述package.json的文件內容替換掉你創建的package.json文件內容。
3.使用npm install 安裝package.json中的插件。自動生成了node_modules文件。我們的依賴插件都放在了這里。
4.編寫好我們的app.js index.html文件。或者復制上述兩處代碼。
5.命令行執行node app.js。
6.瀏覽器訪問localhost:3000，即可出現我們的簡單的上傳頁面了。
以上是“nodejs如何實現簡單的文件上傳功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
