关于express使用formidable上传图片

express中使用formidable上传图片

前端页面

/*使用bootsrap布局静态页面*/
<form class="form-horizontal form-add">
	<div class="form-group">
		<label class="col-xs-2 control-label">分类名称</label>
		<div class="col-xs-8">
			<input name="classname" class="form-control" type="text" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-xs-2 control-label">分类图片</label>
		<div class="col-xs-8">
			<input name="classimg" class="form-control" type="file" accept="image/*" />
		</div>
	</div>
</form>

执行出来页面样式为
在这里插入图片描述

js逻辑代码

/*点击添加分类使用jquery发送ajax请求*/
// js 获取form表单
let form = document.querySelector(".form-add")
// 将表单中的数据通过formdata获取并传输
let formdata = new FormData(form)

$.ajax({
	/*api 为监听接口的地址,如:http:127.0.0.1:3000/*/
	url: api + 'addclass',
	type: 'post',
	data: formdata,
	dataType: 'json',
	// 限制默认发送form方式,改为json格式传送
	contentType: false,
	/*默认情况下,通过data选项传递进来的数据,
	如果是一个对象(技术上讲只要不是字符串),
	都会处理转化成一个查询字符串,
	以配合默认内容类型 “application/x-www-form-urlencoded”。
	如果要发送 DOM 树信息或其它不希望转换的信息,设置为 false。*/
	processData: false,
	success: function(res){
		if(res.status == 200) {
			/*这里执行请求成功的逻辑*/
		}
	}

})

nodejs处理逻辑

let path = require('path')
// 引入express
let express = require('express')
//引入formidable模块
let formidable = require('formidable');
//引入数据库
let mysql = require('mysql')
// 创建数据库连接
let connect = mysql.createConnection({
    host: '127.0.0.1',  //数据库服务器ip,127.0.0.1表示本机
    user: 'root',       
    password: '123',   //数据库密码
    database: 'shop'  //数据库名
})
// 连接数据库
connect.connect()
/*监听添加分类接口*/
app.get("/addclass", function(req,res){
	// 获取请求的参数
   // 获取传入的form表单 解析地址传入的form表单
    let form = new formidable.IncomingForm();

    // 设置图片上传的地址
    form.uploadDir = './upload'

    // 保留图片后缀名
    form.keepExtensions = true

    // 解析参数
    // fields  除了上传图片的其他数据
    // files  上传的文件
    form.parse(req, function(err, fields, files){

        // 解析上传图片的地址,获取图片名称
        let filebase = path.parse(files.img.path).base
        // 将上传的数据存入数据库中
        //  ? 代表sql语句需要的参数
        let sql = 'insert into goods(name, img) values(?) '
        let data = [fields.name, filebase]
        connect.query(sql, [data], function(err, data){
            if(!err) {
                res.json({
                    status: 200,
                    data: ''  //上传成功返回的数据
                })
            }else {
            	//上传失败操作
            }
        })
    })
})
  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值