摘要：默認(rèn)地，表單數(shù)據(jù)會(huì)編碼為。就是說(shuō)，在發(fā)送到服務(wù)器之前，所有字符都會(huì)進(jìn)行編碼空格轉(zhuǎn)換為加號(hào)，特殊符號(hào)轉(zhuǎn)換為值。提交說(shuō)明文件上傳。圖片選擇圖片地址上傳上傳。用表單直接構(gòu)造對(duì)象就不需要下面的方法來(lái)為表單進(jìn)行賦值了。

nodejs一般開(kāi)發(fā)網(wǎng)站基本都用express框架，本文也主要以express為例，講解如何上傳圖片；
express本身沒(méi)有上傳圖片功能；一般都是集成相應(yīng)的模塊；常用的有multer中間件和formidable中間件，前一個(gè)我配置的時(shí)候總是出錯(cuò)，所以pass；此處主要演示formidable的用法；

-表單提交；
-ajax提交；
表單提交代碼如下：

這里注意表單的enctype屬性一定要是：multipart/form-data；
別忘了name屬性;
這是html文檔的講解：

定義和用法
enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。

默認(rèn)地，表單數(shù)據(jù)會(huì)編碼為 "application/x-www-form-urlencoded"。就是說(shuō)，在發(fā)送到服務(wù)器之前，所有字符都會(huì)進(jìn)行編碼（空格轉(zhuǎn)換為 "+" 加號(hào)，特殊符號(hào)轉(zhuǎn)換為 ASCII HEX 值）。

ajax提交:

    







    
    

    

        說(shuō)明:

        

            
ajax 文件上傳 。
        
    
    

        *圖片選擇:

        

            
        
    

    

        


            Ajax上傳
        
    

ajax上傳主要用的是Jquery;這一塊只是知道這么用；配置ajax的時(shí)候processData與contentType都設(shè)置為false；
還有此處用了HTML5的一個(gè)新特性;FormData;
用法如下：new FormData($("#myForm")[0]);

將這坨數(shù)據(jù)傳到后端就可以了；

var express = require("express");
var router = express.Router();
var formidable = require("formidable"),
    fs = require("fs"),
    TITLE = "formidable上傳示例",
    AVATAR_UPLOAD_FOLDER = "/avatar/",
    domain = "http://localhost:3000";

/* 圖片上傳路由 */
router.post("/uploader", function(req, res) {

  var form = new formidable.IncomingForm();   //創(chuàng)建上傳表單
  form.encoding = "utf-8";        //設(shè)置編輯
  form.uploadDir = "public" + AVATAR_UPLOAD_FOLDER;     //設(shè)置上傳目錄
  form.keepExtensions = true;     //保留后綴
  form.maxFieldsSize = 2 * 1024 * 1024;   //文件大小

  form.parse(req, function(err, fields, files) {

    if (err) {
      res.locals.error = err;
      res.render("index", { title: TITLE });
      return;
    }
    console.log(files);

    var extName = "";  //后綴名
    switch (files.fulAvatar.type) {
      case "image/pjpeg":
        extName = "jpg";
        break;
      case "image/jpeg":
        extName = "jpg";
        break;
      case "image/png":
        extName = "png";
        break;
      case "image/x-png":
        extName = "png";
        break;
    }

    if(extName.length == 0){
      res.locals.error = "只支持png和jpg格式圖片";
      res.render("index", { title: TITLE });
      return;
    }

    var avatarName = Math.random() + "." + extName;
    //圖片寫(xiě)入地址；
    var newPath = form.uploadDir + avatarName;
    //顯示地址；
    var showUrl = domain + AVATAR_UPLOAD_FOLDER + avatarName;
    console.log("newPath",newPath);
    fs.renameSync(files.fulAvatar.path, newPath);  //重命名
    res.json({
      "newPath":showUrl
    });
  });
});
module.exports = router;

圖片傳到后端其實(shí)就是一段2進(jìn)制字符串，保存在內(nèi)存中，需要用到fs模塊讀取后再寫(xiě)入到新的目錄；打印files

{ fulAvatar: 
   File {
     domain: null,
     _events: {},
     _eventsCount: 0,
     _maxListeners: undefined,
     size: 106836,
     path: "public/avatar/upload_d75420a381af12d19db01599fd2d0b73.jpeg",
     name: "line.jpeg",
     type: "image/jpeg",
     hash: null,
     lastModifiedDate: 2016-12-19T15:22:47.896Z,
     _writeStream: 
      WriteStream {
        _writableState: [Object],
        writable: false,
        domain: null,
        _events: {},
        _eventsCount: 0,
        _maxListeners: undefined,
        path: "public/avatar/upload_d75420a381af12d19db01599fd2d0b73.jpeg",
        fd: null,
        flags: "w",
        mode: 438,
        start: undefined,
        autoClose: true,
        pos: undefined,
        bytesWritten: 106836,
        closed: true } } }

以上數(shù)據(jù)用fs模塊讀取path屬性得到是就是一段2進(jìn)制的字符串；

注：如果不配置express中間件，express是不能取到上傳的文件的，這一塊在路由回調(diào)函數(shù)的req上沒(méi)有做處理。

以上的示例基本就完成一些基本功能了；
疑惑就是網(wǎng)上一些jquery插件上傳圖片利用ajax，他們的原來(lái)是聲明呢 ？希望有人給解釋下

找到一篇相似的文章：

https://segmentfault.com/a/11...

補(bǔ)充：

 var formData = new FormData();
 var fileObj = document.getElementById("file_upload").files[0];
 formData.append("fulAvatar", fileObj);

formData的兩種用法一種是直接將表單dom直接塞進(jìn)去，還有一種就是通過(guò)append填進(jìn)去，但是這里要注意，填進(jìn)去的是name和dom的files[0]屬性；