您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“nodejs如何實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“nodejs如何實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能”這篇文章吧。
首先需要大家看一下目錄結(jié)構(gòu),然后開(kāi)始一點(diǎn)開(kāi)始我們的小demo。
文件上傳總計(jì)分為三種方式:
1.通過(guò)flash,activeX等第三方插件實(shí)現(xiàn)文件上傳功能。
2.通過(guò)html的form標(biāo)簽實(shí)現(xiàn)文件上傳功能,優(yōu)點(diǎn):瀏覽器兼容好。
3.通過(guò)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的依賴(lài)插件。我用的node.js是4.4.4版本的,大家可以把上面代碼替換到你的package.json文件中,執(zhí)行npm install 可以自動(dòng)安裝demo需要的三個(gè)依賴(lài)插件。
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ǔ)存位置,如過(guò)沒(méi)有會(huì)默認(rèn)儲(chǔ)存別的地方,這里不在詳細(xì)描述,這個(gè)修改臨時(shí)文件儲(chǔ)存的位置 我在百度里查找了三四個(gè)小時(shí)才找到這個(gè)方法,不得不說(shuō)nodejs真難學(xué)。//所以在這里留下我的學(xué)習(xí)記錄,以備以后翻閱。 app.use(mutipart({uploadDir:'./linshi'})); //設(shè)置http服務(wù)監(jiān)聽(tīng)的端口號(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.'); }); //瀏覽器訪問(wèn)localhost會(huì)輸出一個(gè)html文件 app.get('/',function (req,res) { res.type('text/html'); res.sendfile('public/index.html') //這里用來(lái)玩,express框架路由功能寫(xiě)的,與上傳文件沒(méi)沒(méi)有關(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)的文件。我們可以在這里寫(xiě)對(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" ></p> <p> <input type="submit"> </p> </form> </body> </html>
瀏覽器地址訪問(wèn)index.html
選取文件:我選擇了一個(gè)timg.jpg的文件
點(diǎn)擊提交后跳轉(zhuǎn)了頁(yè)面,提示成功上傳
我們看一下,linshi名字的問(wèn)價(jià)加下是否已經(jīng)存在我們上傳的文件,下面的圖證明文件已經(jīng)儲(chǔ)存在了upload_demo/linshi下面,圖片名字被改成了一個(gè)臨時(shí)命名。
我們可以在app.js中寫(xiě)代碼處理我們的圖片文件了。
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文件。我們的依賴(lài)插件都放在了這里。
4.編寫(xiě)好我們的app.js index.html文件。或者復(fù)制上述兩處代碼。
5.命令行執(zhí)行node app.js。
6.瀏覽器訪問(wèn)localhost:3000,即可出現(xiàn)我們的簡(jiǎn)單的上傳頁(yè)面了。
以上是“nodejs如何實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。