express+multer實現(xiàn)上傳圖片

//依賴
npm install --save express multer 
express中文文檔:

http://www.expressjs.com.cn/

multer中文文檔:

https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

html

//enctype="multipart/form-data" 
//file域的 multiple="multiple" 決定一個文件域可以上傳多個圖片
<form name="uploadForm" 
    id="uploadForm" 
    method="post" 
    enctype="multipart/form-data" 
    action="http://192.168.1.200/uploads" 
    target="uploadFrame">
    <p style="margin:10px 0;">上傳圖片:
        <input type="text" name="name" value="xiangheng">
        <input type="file" name="imageFile" multiple="multiple"/>
        <input type="submit" id="fileSubmit" value="上傳" />
    </p>
</form>

node


var fs = require("fs");//操作文件
var express = require("express");//server服務
var multer = require('multer');//接收圖片

var upload = multer({
    dest: './uploads'
});//定義圖片上傳的臨時目錄

var app = express();

// 單域多文件上傳:input[file]的 multiple=="multiple"
app.post('/uploads', upload.array('imageFile', 5), function(req, res, next) {
    // req.files 是 前端表單name=="imageFile" 的多個文件信息(數(shù)組),限制數(shù)量5,應該打印看一下
    for (var i = 0; i < req.files.length; i++) {
        // 圖片會放在uploads目錄并且沒有后綴,需要自己轉存,用到fs模塊
        // 對臨時文件轉存,fs.rename(oldPath, newPath,callback);
        fs.rename(req.files[i].path, "upload/" + req.files[i].originalname, function(err) {
            if (err) {
                throw err;
            }
            console.log('done!');
        })
    }

    res.writeHead(200, {
        "Access-Control-Allow-Origin": "*"http://允許跨域。。。
    });
      // req.body 將具有文本域數(shù)據(jù), 如果存在的話
    res.end(JSON.stringify(req.files)+JSON.stringify(req.body));
})

// 單域單文件上傳:input[file]的 multiple != "multiple"
app.post('/upload', upload.single('imageFile'), function(req, res, next) {
    // req.file 是 前端表單name=="imageFile" 的文件信息(不是數(shù)組)
    
    fs.rename(req.file.path, "upload/" + req.file.originalname, function(err) {
        if (err) {
            throw err;
        }
        console.log('上傳成功!');
    })
    res.writeHead(200, {
        "Access-Control-Allow-Origin": "*"
    });
    res.end(JSON.stringify(req.file)+JSON.stringify(req.body));
})


app.listen(80);

還有多文件域上傳,多個input[type=file],我沒試!!!(這句話對不對也沒試)

var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files 是一個對象 (String -> Array) 鍵是文件名, 值是文件數(shù)組
  //
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body 將具有文本域數(shù)據(jù), 如果存在的話
})

https://www.adtk.cn

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 大部分的后端會很很鄙視前端。我也不知道為什么,可能大部分人都會覺得腳本語言根本不算語言。 大多人 會叫我們切圖仔,...
    小黑的眼閱讀 3,428評論 0 15
  • 前端知識體系http://www.cnblogs.com/sb19871023/p/3894452.html 前端...
    秋風喵閱讀 12,560評論 7 163
  • 我們一天天長大一天天快樂卻不知道母親和父親是在背后一把屎一把尿的,把我們從幼小的我?guī)Т螅L大成人。
    糖糖的星空閱讀 134評論 0 1
  • 現(xiàn)在在上管理思想史,相比思修和新生研討課而言其實這課挺有用的,可是大家仿佛都沒有和我同樣的感受,從這堂課遠遠沒有另...
    京太兒閱讀 275評論 2 4
  • 第1章 遇金魚— 從前,在蔚藍的大海邊,坐落著一間十分簡陋的泥棚,里面住著一對老夫妻,他們在這兒過了整整三十又三...
    涵寶愛故事閱讀 940評論 0 0