美文网首页
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