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 {
//上传失败操作
}
})
})
})