標籤：level add json pre oca sub png plain modules
首先需要大家看一下目錄結構，然後開始一點開始我們的小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" style=""></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，即可出現我們的簡單的上傳頁面了。
我的demo檔案百度云：
連結：http://pan.baidu.com/s/1c2rDCQG 密碼：nrml
nodejs 實現簡單的檔案上傳功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
