快捷導(dǎo)航

node.js使用express框架進(jìn)行文件上傳詳解

更新時(shí)間：2019年03月03日 11:02:33 投稿：laozhang

在本篇內(nèi)容里小編給大家整理了關(guān)于node.js使用express框架進(jìn)行文件上傳的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。

關(guān)于node.js使用express框架進(jìn)行文件上傳，主要來(lái)自于最近對(duì)Settings-Sync插件做的研究。

目前的研究算是取得的比較好的進(jìn)展。

Settings-Sync中通過(guò)快捷鍵上傳文件，其實(shí)主要還是請(qǐng)求后端接口。

于是我便使用node.js模擬一個(gè)服務(wù)，這個(gè)服務(wù)其實(shí)就相當(dāng)于github api(Settings-Sync實(shí)際請(qǐng)求的接口，比如token驗(yàn)證，gist存儲(chǔ)創(chuàng)建等都是來(lái)自github 對(duì)應(yīng)的api)。

話(huà)不多說(shuō)，直接代碼貼起講解:

1.創(chuàng)建一個(gè)node.js項(xiàng)目(這里我以express框架為例)

關(guān)于如何創(chuàng)建一個(gè)node.js項(xiàng)目我就不詳細(xì)說(shuō)，通常通過(guò)npm init就可以創(chuàng)建一個(gè)node.js項(xiàng)目了。
關(guān)于node.js項(xiàng)目詳細(xì)教程，可以參考該篇文章nodeJS入門(mén)——新建一個(gè)項(xiàng)目及代碼詳解
當(dāng)然了，如果你是直接通過(guò)這篇文章操作，最先可能會(huì)報(bào)這個(gè)錯(cuò)誤，錯(cuò)誤信息如下:

'express' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序
或批處理文件。

解決方式很簡(jiǎn)單，并不是npm install -g express就可以的，在此之前還需執(zhí)行npm install -g express-generator

這條命令很好理解，你可以將其理解為你的express框架生成器，以Java中Maven來(lái)說(shuō)，通常ide就把maven結(jié)構(gòu)都弄好了，你只需在創(chuàng)建項(xiàng)目的時(shí)候，勾選maven即可，它會(huì)自己將所有相關(guān)項(xiàng)目包括配置文件一起生成。

雖然說(shuō)我將地址貼出來(lái)，但是我覺(jué)得還是實(shí)際操作一遍，這樣對(duì)此有一個(gè)感性認(rèn)識(shí)(初學(xué)編程的人或者是已經(jīng)有編程經(jīng)驗(yàn)的人，是絕對(duì)不能忽略這一點(diǎn)的)。

流程如下:

a.使用express命令創(chuàng)建express項(xiàng)目

express blog

效果圖如下:

express非常有人性化，已經(jīng)告訴你怎么進(jìn)入blog項(xiàng)目及其安裝相關(guān)的庫(kù)依賴(lài)和啟動(dòng)了，你只需按照它的這個(gè)步驟，一步一步來(lái)就行了

b.目錄結(jié)構(gòu)分析示意圖如下所示:

app.js:——啟動(dòng)文件，也可以說(shuō)是主文件入口。
package.json——定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息（比如名稱(chēng)、版本、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊，也就是配置項(xiàng)目所需的運(yùn)行和開(kāi)發(fā)環(huán)境。
node_modules——存放package.json中安裝的模塊，當(dāng)你在package.json添加依賴(lài)的模塊并安裝后，存放在這個(gè)文件夾下
public——存放image、css、js等文件
routes——存放路由文件
views——存放視圖文件或者說(shuō)模板文件
bin——存放可執(zhí)行文件

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>
 選擇一個(gè)文件上傳: <br />
 <form action="/gists" method="post" enctype="multipart/form-data">
  <input type="file" name="content" />
  <br />
  <input type="submit" value="上傳文件" />
 </form>
 
</body>
</html>

b.編寫(xiě)相關(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.上傳文件及其效果頁(yè)面圖:

上傳成功顯示圖:

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

最后例子中還有阿里云和騰訊云的圖片存儲(chǔ)，大家可以做一個(gè)參考。

源碼地址為:https://github.com/developers-youcong/mock-github-api

希望能夠?qū)Υ蠹矣兴鶈l(fā)和幫助

注意，可能遇到的問(wèn)題:

問(wèn)題一:靜態(tài)資源需要放行，否則無(wú)法訪問(wèn)
在index.js補(bǔ)充這段代碼即可解決這個(gè)問(wèn)題

app.use(express.static(path.join(__dirname, 'public')))

問(wèn)題二:socket hang up

我將var bodyParser = require(‘body-parser')去除就解決了這個(gè)問(wèn)題

錯(cuò)誤信息：ERROR: { [Error: socket hang up] code: 'ECONNRESET' }

分析原因：由于某種原因，導(dǎo)致http目標(biāo)地址建立socket連接的時(shí)候出錯(cuò)
錯(cuò)誤解決：經(jīng)過(guò)對(duì)比查找，發(fā)現(xiàn)我這里nodejs項(xiàng)目中有對(duì)中間件“body-parser”的使用，將其去除，則沒(méi)有問(wèn)題了
還有其他一些原因，這里暫時(shí)沒(méi)有遇到，就不多做解釋了，

您可能感興趣的文章: