zoukankan      html  css  js  c++  java
  • nodejs图片上传

    node中图片上传的中间键很多,比如formidable等,这里我们使用nodejs中的fs来实现文件上传处理:

    1、安装中间键connect-multiparty

    npm install connect-multiparty

    通过connect-multiparty中间键我们可以实现req.files的功能,这样可以拿到上传文件的大小、类型等一系列参数,对其进行判断,从而达到限制上传的目的。

    2、connect-multiparty的使用

    var multipart = require('connect-multiparty');
    var multipartMiddleware = multipart();
    ....
    router.post('/upload', multipartMiddleware, function (req, res) {
      ....
    }

    在需要引入的js页面顶部引入上面代码,再在相应的路由中如上引入,然后通过req.files即可直接获取上传的文件参数。

    3、完整实例:

    index2.html文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文件上传实例</title>
    </head>
    <body>
    
    <form enctype="multipart/form-data" action="/upload" method="post">
        <input type="file" name="uploadFile" id="upload" />
        <input type="submit" value="上传"/>
    </form>
    
    </body>
    </html>

    app.js配置:

    var routes = require('./routes/index');
    ...
    //设置post文件大小
    app.use(bodyParser.json({limit: '50mb'}));
    app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));

    app.set('views', path.join(__dirname, 'views'));
    var template = require('art-template');
    template.config('base', '');
    template.config('extname', '.html');
    app.engine('.html', template.__express);
    app.set('view engine', 'html');

    ... 
    app.use(
    '/', routes);

    index.js文件:

    /**
     * Created by chaozhou on 2015/11/9.
     */
    var express = require('express');
    var router = express.Router();
    var tags = require('../modules/tag.js');
    var multipart = require('connect-multiparty');
    var multipartMiddleware = multipart();
    var fs = require("fs");
    
    router.get('/', function(req, res, next) {
        res.render("index2");
    });
    
    router.post('/upload', multipartMiddleware,function(req, res) {
      var type = req.files.uploadFile.type;
      var size = req.files.uploadFile.size;
      var maxSize = 800 * 1024;     //800K
      type = type.split("/")[1];
      if (type != "jpeg" && type != "jpg" && type != "png") {
        res.send({"errMsg": "请上传png、jpg、jpeg格式照片"});
        return;
      } else if (size > maxSize) {
        res.send({"errMsg": "图片大小不要超过800K"});
        return;
      } else if (type == "jpeg" || type == "jpg" || type == "png" && size < maxSize) {
        fs.readFile(req.files.uploadFile.path, function (err, data) {
          if (err) {
            res.send({"errMsg": "'图片上传失败'"});
            return;
          }
          var base64str = new Buffer(data).toString('base64'); //图片转字节
          fs.writeFileSync("public/upload/" + "upload."+type, base64str, 'base64');  //写入本地
          res.send("<input type='image' src='/upload/upload."+type+"'/>");
        });
      }
    });
    
    module.exports = router;

    在public目录下新建upload上传文件夹,上传的图片统一放在这里:

    浏览器上传效果:

    上传成功!

  • 相关阅读:
    央视好节目整理
    IT项目各阶段管理
    使用mint-ui Loadmore组件时出现报错
    简单了解map,filter,some,every,forEach,for in,for of,find,用法
    h5简单学习总结
    video标签详解(转载)
    浏览器对象
    获取后三天的时间
    Map和Set以及iterable类型集合的循环遍历
    placeholder的样式设置
  • 原文地址:https://www.cnblogs.com/vipzhou/p/4948784.html
Copyright © 2011-2022 走看看