express+ajax图片上传

使用formdata进行图片上传

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>

发送ajax请求

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("与服务器通信发生错误");
        }
    });
}

后台处理方式

1. express中间件multer模块

diskStorage()提供了文件存储位置控制权限，该方法接收一个对象参数，其中包含两destination和filename两个属性。
destination用于设置文件的存储目录，可以是一个函数或字符串。若未提供该参数，将使用系统的临时目录。
filename用于设置文件名。若未提供该参数，将使用一个随机字符串，且文件名中不包含扩展名。

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

上传单个图片，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解析完上传文件后，会被保存为一个包含以下字段的对象：

• fieldname - 表单提交的文件名(input控件的name属性)
• originalname - 文件在用户设备中的原始名称
• encoding - 文件的编码类型
• mimetype - 文件的Mime类型
• size - 文件的大小
• destination - 文件的保存目录(DiskStorage)
• filename - 文件在destination中的名称(DiskStorage)
• path - 上传文件的全路径(DiskStorage)
• buffer - 文件对象的Buffer(MemoryStorage)

详细代码请看 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});
});

详细代码请看 connect-multiparty

3.multiparty

app.post("/upload", function (req, res) {
    //生成multiparty对象，并配置上传目标路径
    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);
            //重命名为真实文件名
            fs.rename(uploadedPath, dstPath, function (err) {
                if (err) {
                    console.log('rename error: ' + err);
                } else {
                    res.json({code: 200, filePath: './upload/' + inputFile.originalFilename});
                }
            });
        }
    });
});

详细代码请看 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