nodejs?實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能(示例詳解)

首先需要大家看一下目錄結(jié)構(gòu),然后開始一點(diǎn)開始我們的小demo。
文件上傳總計(jì)分為三種方式:
1.通過flash,activeX等第三方插件實(shí)現(xiàn)文件上傳功能。
2.通過html的form標(biāo)簽實(shí)現(xiàn)文件上傳功能,優(yōu)點(diǎn):瀏覽器兼容好。
3.通過xhr level2的異步請(qǐng)求,可以百度f(wàn)ormData對(duì)象。
這里使用2做個(gè)練習(xí)。
node插件請(qǐng)看下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文件中,執(zhí)行npm install 可以自動(dòng)安裝demo需要的三個(gè)依賴插件。
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();
//下面會(huì)修改臨時(shí)文件的儲(chǔ)存位置,如過沒有會(huì)默認(rèn)儲(chǔ)存別的地方,這里不在詳細(xì)描述,這個(gè)修改臨時(shí)文件儲(chǔ)存的位置 我在百度里查找了三四個(gè)小時(shí)才找到這個(gè)方法,不得不說nodejs真難學(xué)。//所以在這里留下我的學(xué)習(xí)記錄,以備以后翻閱。
app.use(mutipart({uploadDir:'./linshi'}));
//設(shè)置http服務(wù)監(jiān)聽的端口號(hào)。
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會(huì)輸出一個(gè)html文件
app.get('/',function (req,res) {
res.type('text/html');
res.sendfile('public/index.html')
//這里用來(lái)玩,express框架路由功能寫的,與上傳文件沒沒有關(guān)系。
app.get('/about',function (req,res) {
res.type('text/plain');
res.send('Travel about');
//這里就是接受form表單請(qǐng)求的接口路徑,請(qǐng)求方式為post。
app.post('/upload',mutipartMiddeware,function (req,res) {
//這里打印可以看到接收到文件的信息。
console.log(req.files);
/*//do something
* 成功接受到瀏覽器傳來(lái)的文件。我們可以在這里寫對(duì)文件的一系列操作。例如重命名,修改文件儲(chǔ)存路徑 。等等。
*
* */
//給瀏覽器返回一個(gè)成功提示。
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" style=""></p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>瀏覽器地址訪問index.html

選取文件:我選擇了一個(gè)timg.jpg的文件

點(diǎn)擊提交后跳轉(zhuǎn)了頁(yè)面,提示成功上傳

我們看一下,linshi名字的問價(jià)加下是否已經(jīng)存在我們上傳的文件,下面的圖證明文件已經(jīng)儲(chǔ)存在了upload_demo/linshi下面,圖片名字被改成了一個(gè)臨時(shí)命名。
我們可以在app.js中寫代碼處理我們的圖片文件了。

demo要點(diǎn):
1.首先安裝好nodejs 我這里的版本為4.4.4。
2.創(chuàng)建一個(gè)英文命名的文件。手動(dòng),或使用npm init創(chuàng)建一個(gè)package.json文件。把上述package.json的文件內(nèi)容替換掉你創(chuàng)建的package.json文件內(nèi)容。
3.使用npm install 安裝package.json中的插件。自動(dòng)生成了node_modules文件。我們的依賴插件都放在了這里。
4.編寫好我們的app.js index.html文件。或者復(fù)制上述兩處代碼。
5.命令行執(zhí)行node app.js。
6.瀏覽器訪問localhost:3000,即可出現(xiàn)我們的簡(jiǎn)單的上傳頁(yè)面了。
到此這篇關(guān)于nodejs 實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能的文章就介紹到這了,更多相關(guān)nodejs 文件上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
node.js如何自定義實(shí)現(xiàn)一個(gè)EventEmitter
我們了解到,Node采用了事件驅(qū)動(dòng)機(jī)制,而EventEmitter就是Node實(shí)現(xiàn)事件驅(qū)動(dòng)的基礎(chǔ),本文主要介紹了node.js自定義實(shí)現(xiàn)EventEmitter,感興趣的可以了解一下2021-07-07
nodejs中使用worker_threads來(lái)創(chuàng)建新的線程的方法
這篇文章主要介紹了nodejs中使用worker_threads來(lái)創(chuàng)建新的線程的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01
NodeJS和BootStrap分頁(yè)效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了NodeJS和BootStrap分頁(yè)效果的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11

