安裝 npm install [email protected]

app.js中

var postphoto = require('./routes/upphoto');
app.use('/photos', postphoto);

routers資料夾下面建立upphoto。js

var formidable = require('formidable'),
    util = require('util');

var express = require('express');
var router = express.Router();
const path = require('path');
var fs = require("fs")
    /* GET home page. */
router.post("/upload", (req, res) => {
    // console.log(req)
    if (req.url == '/upload' && req.method.toLowerCase() === 'post') { // 處理上傳的檔案    
        var form = new formidable.IncomingForm();
        form.uploadDir = path.join(__dirname, 'tmp'); //檔案儲存的臨時目錄為當前專案下的tmp資料夾    
        form.maxFieldsSize = 1 * 1024 * 1024; //使用者頭像大小限制為最大1M      
        form.keepExtensions = true; //使用檔案的原副檔名
        // console.log(form)
        // form.uploadDir = "public/images";
        form.parse(req, function(err, fields, file) {
            console.log(333)
            var filePath = ''; //如果提交檔案的form中將上傳檔案的input名設定為tmpFile，就從tmpFile中取上傳檔案。否則取for in迴圈第一個上傳的檔案。        
            if (file.tmpFile) {
                filePath = file.tmpFile.path;
            } else {
                for (var key in file) {
                    if (file[key].path && filePath === '') {
                        filePath = file[key].path;
                        break;
                    }
                }
            } //檔案移動的目錄資料夾，不存在時建立目標資料夾        
            var targetDir = path.join(__dirname, 'upload');
            if (!fs.existsSync(targetDir)) {
                fs.mkdir(targetDir);
            }
            var fileExt = filePath.substring(filePath.lastIndexOf('.')); //判斷檔案型別是否允許上傳        
            if (('.jpg.jpeg.png.gif').indexOf(fileExt.toLowerCase()) === -1) {
                var err = new Error('此檔案型別不允許上傳');
                res.json({
                    code: -1,
                    message: '此檔案型別不允許上傳'
                });
            } else { //以當前時間戳對上傳檔案進行重新命名            
                var fileName = new Date().getTime() + fileExt;
                var targetFile = path.join(targetDir, fileName); //移動檔案            
                fs.rename(filePath, targetFile, function(err) {
                    if (err) {
                        console.info(err);
                        res.json({
                            code: -1,
                            message: '操作失敗'
                        });
                    } else { //上傳成功，返回檔案的相對路徑                    
                        var fileUrl = '/upload/' + fileName;
                        res.json({
                            code: 0,
                            fileUrl: fileUrl
                        });
                    }
                });
            }

            // res.writeHead(200, { 'content-type': 'text/plain' });
            // res.write('received upload:\n\n');
            // console.log(files)
            // console.log(fields.Field)
            // res.end(util.inspect({ fields: fields, files: files }));
        });
        return;
    }
})



module.exports = router;
 

js中點選input filter

 $('#fulAvatar').on('change', function() {
        var fd = new FormData();
        fd.append("Field", this.files[0]);
        console.log(this.files[0]);
        $.ajax({
            url: '/photos/upload',
            type: "POST",
            data: fd,
            processData: false, // 不處理髮送的資料
            contentType: false //不去設定Content-Type請求頭
        });

    })