關(guān)于node.js使用express框架進(jìn)行文件上傳,主要來自于最近對Settings-Sync插件做的研究。
目前的研究算是取得的比較好的進(jìn)展。
Settings-Sync中通過快捷鍵上傳文件,其實主要還是請求后端接口。
于是我便使用node.js模擬一個服務(wù),這個服務(wù)其實就相當(dāng)于github api(Settings-Sync實際請求的接口,比如token驗證,gist存儲創(chuàng)建等都是來自github 對應(yīng)的api)。
話不多說,直接代碼貼起講解:
1.創(chuàng)建一個node.js項目(這里我以express框架為例)
關(guān)于如何創(chuàng)建一個node.js項目我就不詳細(xì)說,通常通過npm init就可以創(chuàng)建一個node.js項目了。
關(guān)于node.js項目詳細(xì)教程,可以參考該篇文章nodeJS入門――新建一個項目及代碼詳解
當(dāng)然了,如果你是直接通過這篇文章操作,最先可能會報這個錯誤,錯誤信息如下:
'express' 不是內(nèi)部或外部命令,也不是可運(yùn)行的程序或批處理文件。
解決方式很簡單,并不是npm install -g express就可以的,在此之前還需執(zhí)行npm install -g express-generator
這條命令很好理解,你可以將其理解為你的express框架生成器,以Java中Maven來說,通常ide就把maven結(jié)構(gòu)都弄好了,你只需在創(chuàng)建項目的時候,勾選maven即可,它會自己將所有相關(guān)項目包括配置文件一起生成。
雖然說我將地址貼出來,但是我覺得還是實際操作一遍,這樣對此有一個感性認(rèn)識(初學(xué)編程的人或者是已經(jīng)有編程經(jīng)驗的人,是絕對不能忽略這一點的)。
流程如下:
a.使用express命令創(chuàng)建express項目
express blog
效果圖如下:

express非常有人性化,已經(jīng)告訴你怎么進(jìn)入blog項目及其安裝相關(guān)的庫依賴和啟動了,你只需按照它的這個步驟,一步一步來就行了
b.目錄結(jié)構(gòu)分析示意圖如下所示:

2.使用express框架進(jìn)行文件上傳
注意,目錄結(jié)構(gòu)如下所示(我主要是復(fù)用最近研究的mock-github-api):

a.準(zhǔn)備html文件
public文件夾主要放置靜態(tài)文件,如index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文件上傳</title></head><body> <h3>文件上傳:</h3> 選擇一個文件上傳: <br /> <form action="/gists" method="post" enctype="multipart/form-data"> <input type="file" name="content" /> <br /> <input type="submit" value="上傳文件" /> </form> </body></html>
b.編寫相關(guān)的js
像upload.js屬于路由,通常放置在routes文件夾下
var fs = require('fs');var express = require('express');var multer = require('multer');var path = require('path');var router = express.Router();var upload = multer({dest: 'upload_tmp/'});router.post('/', upload.any(), function(req, res, next) { console.log(req.files[0]); // 上傳的文件信息 var des_file = "./upload/" + req.files[0].originalname; fs.readFile( req.files[0].path, function (err, data) { fs.writeFile(des_file, data, function (err) { if( err ){ console.log( err ); }else{ response = { message:'File uploaded successfully', filename:req.files[0].originalname }; console.log( response ); res.end( JSON.stringify( response ) ); } }); });});module.exports = router;c.上傳文件及其效果頁面圖:

上傳成功顯示圖:

upload文件夾下會有對應(yīng)的文件(也就是你剛剛通過頁面上傳的文件)

最后例子中還有阿里云和騰訊云的圖片存儲,大家可以做一個參考。
源碼地址為:https://github.com/developers-youcong/mock-github-api
希望能夠?qū)Υ蠹矣兴鶈l(fā)和幫助
注意,可能遇到的問題:
問題一:靜態(tài)資源需要放行,否則無法訪問
在index.js補(bǔ)充這段代碼即可解決這個問題
app.use(express.static(path.join(__dirname, 'public')))
問題二:socket hang up
我將var bodyParser = require(‘body-parser')去除就解決了這個問題
錯誤信息:ERROR: { [Error: socket hang up] code: 'ECONNRESET' }
分析原因:由于某種原因,導(dǎo)致http目標(biāo)地址建立socket連接的時候出錯
錯誤解決:經(jīng)過對比查找,發(fā)現(xiàn)我這里nodejs項目中有對中間件“body-parser”的使用,將其去除,則沒有問題了
還有其他一些原因,這里暫時沒有遇到,就不多做解釋了,
新聞熱點
疑難解答