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

更新時間：2022年02月28日 10:04:12 作者：iwang5566

這篇文章主要介紹了nodejs?實現(xiàn)簡單的文件上傳功能,文件上傳方式分為三種，本文通過實例代碼給大家詳細介紹，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

首先需要大家看一下目錄結(jié)構(gòu)，然后開始一點開始我們的小demo。

文件上傳總計分為三種方式：

1.通過flash,activeX等第三方插件實現(xiàn)文件上傳功能。

2.通過html的form標簽實現(xiàn)文件上傳功能，優(yōu)點：瀏覽器兼容好。

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文件中，執(zhí)行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真難學(xué)。//所以在這里留下我的學(xué)習記錄，以備以后翻閱。
app.use(mutipart({uploadDir:'./linshi'}));
//設(shè)置http服務(wù)監(jiān)聽的端口號。
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框架路由功能寫的，與上傳文件沒沒有關(guān)系。
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