美文网首页
express+multer实现上传图片

express+multer实现上传图片

作者: adtk | 来源:发表于2017-03-28 12:56 被阅读0次
//依赖
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" 的多个文件信息(数组),限制数量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": "*"//允许跨域。。。
    });
      // req.body 将具有文本域数据, 如果存在的话
    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" 的文件信息(不是数组)
    
    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) 键是文件名, 值是文件数组
  //
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body 将具有文本域数据, 如果存在的话
})

https://www.adtk.cn

相关文章

网友评论

      本文标题:express+multer实现上传图片

      本文链接:https://www.haomeiwen.com/subject/ncjjottx.html