node实现表单图片、数据上传

在搭建博客时,想要在文章中添加图片作为文章封面,这时候要对前台表单中上传的文件进行上传等操作

前台index.ejs页面的表单

<form class="form-signin" role="form" method="post" enctype='multipart/form-data'>
	<div class="form-group">
	    <label="name">账号</label>
	    <input type="text" name="userid">
	    <br><br>
		<label="name">姓名</label>
		<br><br>
	
		<label="fulAvatar">上传文件</label>
		<input type="file" id="fulAvatar" name="fulAvatar" accept="image/*"/>
	</div>
	<button id="btnSub" class="btn btn-lg btn-primary" type="submit">提 交</button>
</form>

路由index.js

// 导入必备的模块,全局设置一些公共变量
var express = require('express'),
    router = express.Router(),    
    formidable = require('formidable'),
    fs = require('fs'),
    TITLE = '文件上传示例',
    AVATAR_UPLOAD_FOLDER = '/avatar/';
 
var mongoClient = require('mongodb').MongoClient;
var db_url = "mongodb://127.0.0.1:27017/form";

/* GET home page. */
router.get('/', function(req, res) {
    res.render('index');
});
 
router.post('/', function(req, res) {
    //创建上传表单
    var form = new formidable.IncomingForm();
    //设置编辑
    form.encoding = 'utf-8';
    //设置上传目录
    form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER;
    //保留后缀
    form.keepExtensions = true;
    //文件大小 2M
    form.maxFieldsSize = 2 * 1024 * 1024;
    // 上传文件的入口文件
    form.parse(req, function(err, fields, files) {
        if (err) {
            return;
        }
        var extName = '';  //后缀名
        switch (files.fulAvatar.type) {
            case 'image/pjpeg':
                extName = 'jpg';
                break;
            case 'image/jpeg':
                extName = 'jpg';
                break;         
            case 'image/png':
                extName = 'png';
                break;
            case 'image/x-png':
                extName = 'png';
                break;         
        }
        var avatarName = Math.random() + '.' + extName;
		var newPath = form.uploadDir + avatarName;
        fs.renameSync(files.fulAvatar.path, newPath);  //重命名

        // 图片名称
        var imgname = avatarName;
        // 获取表单其他内容
        var id = fields.userid;
        var name = fields.username;
        console.log(id,name);
        mongoClient.connect(db_url, function (err, db) {
            if (err) throw err;
            var info = db.collection("forminfo");
            info.insert({'id': id, 'name':name , 'imgname':imgname}, function (err, result) {
              if (err) throw err;
              res.render('index');
            });
            db.close();
        });
    });
});
 
module.exports = router;

在public目录下创建avatar文件夹,图片将会上传在里面,如下
这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值