使用formdata進(jìn)行圖片上傳

html代碼

   <form class="form-horizontal" enctype='multipart/form-data' method='post' action='javascript:;' role="form"
          id="frmUploadFile">
        <label class="control-label col-sm-2">上傳選擇</label>
        <input type="file" name="files" class="form-control"/>
        <button class="btn btn-primary" onClick="uploadImage()">上傳</button>
        <span class="help-inline" id="spanMessage">選擇文件，并上傳</span>
    </form>
    //上傳成功后顯示圖片
    <div>
        <img id="imgShow" src=""/>
    </div>

發(fā)送ajax請(qǐng)求

function uploadImage() {
    var formData = new FormData($("#frmUploadFile")[0]);
    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            if (200 === data.code) {
                $("#imgShow").attr('src', data.filepath);
                $("#spanMessage").html("上傳成功");
            } else {
                $("#spanMessage").html("上傳失敗");
            }
            console.log('imgUploader upload success, data:', data);
        },
        error: function (err) {
            console.log("err", err);
            $("#spanMessage").html("與服務(wù)器通信發(fā)生錯(cuò)誤");
        }
    });
}

后臺(tái)處理方式

1. express中間件multer模塊

diskStorage()提供了文件存儲(chǔ)位置控制權(quán)限，該方法接收一個(gè)對(duì)象參數(shù)，其中包含兩destination和filename兩個(gè)屬性。
destination用于設(shè)置文件的存儲(chǔ)目錄，可以是一個(gè)函數(shù)或字符串。若未提供該參數(shù)，將使用系統(tǒng)的臨時(shí)目錄。
filename用于設(shè)置文件名。若未提供該參數(shù)，將使用一個(gè)隨機(jī)字符串，且文件名中不包含擴(kuò)展名。

var storage = multer.diskStorage({
 destination: function (req, file, cb) {
 ...
 },
 filename: function (req, file, cb) {
 ...
})
var upload = multer({ storage: storage })

上傳單個(gè)圖片，files為form表單的name屬性

app.post("/upload", upload.single('files'), function (req, res) {
    res.json({code: 200, filePath: 'http://' + req.headers.host + '/upload/' + path.basename(req.file.path)});
});

multer解析完上傳文件后，會(huì)被保存為一個(gè)包含以下字段的對(duì)象：

• fieldname - 表單提交的文件名(input控件的name屬性)
• originalname - 文件在用戶設(shè)備中的原始名稱
• encoding - 文件的編碼類型
• mimetype - 文件的Mime類型
• size - 文件的大小
• destination - 文件的保存目錄(DiskStorage)
• filename - 文件在destination中的名稱(DiskStorage)
• path - 上傳文件的全路徑(DiskStorage)
• buffer - 文件對(duì)象的Buffer(MemoryStorage)

詳細(xì)代碼請(qǐng)看 multer

2. connect-multiparty

// multipart() -引入 let multipart = require("connect-multiparty");
app.post("/upload", multipart(), function (req, res) {
    //get filename
    var filename = req.files.files.originalFilename || path.basename(req.files.files.ws.path);
    //copy file to a public directory
    var targetPath = path.dirname(__filename) + '/public/upload/' + filename;
    //copy file
    fs.createReadStream(req.files.files.ws.path).pipe(fs.createWriteStream(targetPath));
    //return file url
    res.json({code: 200, filepath: './upload/' + filename});
});

詳細(xì)代碼請(qǐng)看 connect-multiparty

3.multiparty

app.post("/upload", function (req, res) {
    //生成multiparty對(duì)象，并配置上傳目標(biāo)路徑
    var form = new multiparty.Form({uploadDir: './public/upload/'});
    //上傳完成后處理
    form.parse(req, function (err, fields, files) {
        var filesTmp = JSON.stringify(files, null, 2);
        if (err) {
            console.log('parse error: ' + err);
        } else {
            var inputFile = files.files[0];
            var uploadedPath = inputFile.path;
            console.log(uploadedPath);
            var dstPath = './public/upload/' + inputFile.originalFilename;
            console.log(dstPath);
            var paths = "http://localhost:3000/upload/" + inputFile.originalFilename;
            console.log(paths);
            //重命名為真實(shí)文件名
            fs.rename(uploadedPath, dstPath, function (err) {
                if (err) {
                    console.log('rename error: ' + err);
                } else {
                    res.json({code: 200, filePath: './upload/' + inputFile.originalFilename});
                }
            });
        }
    });
});

詳細(xì)代碼請(qǐng)看 multiparty

參考
http://m.jb51.net/article/95488.htm
https://chensd.com/2015-01/Node-js-Ajax-Upload-File.html
http://www.cnblogs.com/pingfan1990/p/4701355.html