前端上传头像并且使用中间件formidable处理
formidable中间件
相关配置
-
下载
npm install formidable
-
导入
const formidable = require('formidable')
使用
-
1.
创建表单解析对象
const form = formidable({ multiples: true , keepExtensions: true })
-
2.
配置上传文件存放的位置
form.uploadDir = path.join( __dirname , 'public' , 'uploads' )
-
3.
解析表单
err
错误对象 ,如果表单解析失败,存放错误信息,如果表单解析成功,为nullfields
对象类型,保存普通表单数据files
对象类型,保存上传文件的相关数据
form.parse(req , (err, fields, files) => { if(err){ console.log(err) res.send('上传失败') } else{ console.log(err, fields, files) res.send('上传成功') } })
上传图片
同步表单提交
form
标签一定要加 enctype="multipart/form-data"
<form action="http://127.0.0.1:5000/upload" method="post" enctype="multipart/form-data">
<input type="text" name="nickname">
<input type="text" name="email">
<input type="file" name="files" value="指定文件">
<br><br>
<input type="submit" value="上传">
</form>
Ajax异步提交
-
为上传按钮添加
change
监听事件,获取上传文件列表的第一个文件// 这里的this是被监听的DOM var file = this.files[0];
-
实例化一个formData后将文件追加进去
let formDataObj = new FormData() // input的name 追加的文件内容 formDataObj.append('avatar' , file)
-
通过
jquery
封装的ajax
方法发起请求$.ajax({ url: 'http://127.0.0.1:5000/upload', method: 'POST', data: formDataObj, processData: false, contentType: false, }).then(function(res){ console.log(res) })
demo代码
前端页面代码
表单同步提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
</head>
<body>
<form action="http://127.0.0.1:5000/upload" method="post" enctype="multipart/form-data">
<input type="text" name="nickname">
<input type="text" name="email">
<input type="file" name="files" value="指定文件">
<br><br>
<input type="submit" value="上传">
</form>
</body>
</html>
ajax异步提交
部分代码来自17素材网 上传头像 的源码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>formidable</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.con4{
width: 200px;
height: auto;
overflow: hidden;
margin: 20px auto;
color: #FFFFFF;
}
.con4 .btn{
width: 90%;
line-height: 20px;
text-align: center;
background-color: #3796f6;
display: block;
font-size: 13px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.con4 .btn:hover{
color: #fff;
background-color: #408cd8;
}
.upload{
float: left;
position: relative;
}
.upload_pic{
display: block;
width: 100%;
height: 40px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
border-radius: 5px;
cursor: pointer;
}
#cvs{
width: 90%;
overflow: hidden;
border-radius: 4px;
background-color: #fafafa;
border: 1px solid rgba(133,153,171,0.2);
}
</style>
</head>
<body>
<div style="width: 400px; margin: 200px;">
<form role="form" id="publish_blog" method="post" enctype="multipart/form-data" >
<div class="form-group">
<label for="name">名字</label>
<input type="text" class="form-control" placeholder="请输入名称" name="name">
</div>
<div class="form-group">
<label for="email">email</label>
<input type="text" class="form-control" placeholder="请输入email" name="email">
</div>
<div class="form-group">
<label for="avatar">头像 <span style="font-size: 12px;color: #8599ab;font-weight: normal;">(建议选择正方形的图片哦...)</span></label>
<div class="con4">
<canvas id="cvs" width="200" height="200"></canvas>
<span class="btn upload ">上传头像<input type="file" class="upload_pic" id="uploadAvatar" name="avatar" /></span>
</div>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
let formDataObj = new FormData()
//获取上传按钮
var input1 = document.getElementById("uploadAvatar");
function readFile(){
var file = this.files[0];//获取上传文件列表中第一个文件
formDataObj.append('avatar' , file)
var reader = new FileReader(); //实例一个文件对象
reader.readAsDataURL(file); //把上传的文件转换成url
reader.onload = function(e){
$('#publish_blog').on('submit', function (e) {
e.preventDefault() //阻止默认事件
var formData = $(this).serializeArray() //获取表单数据
for(let item of formData){
console.log(item)
formDataObj.append(item.name , item.value)
}
console.log(formDataObj)
$.ajax({
url: 'http://127.0.0.1:5000/upload',
method: 'POST',
data: formDataObj,
processData: false,
contentType: false,
}).then(function(res){
console.log(res)
})
})
var image = new Image();
image.src = e.target.result;
image.onload = function(){
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, 200, 200);
};
}
};
</script>
</body>
</html>
后台app.js代码
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const path = require('path')
// 引入
const formidable = require('formidable')
var app = express()
// 解决跨域
app.use(cors())
//配置解析 post
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.post('/upload' , function(req , res){
// 1. 创建表单解析对象
const form = formidable({
multiples: true ,
keepExtensions: true
})
// 2. 配置上传文件存放的位置
console.log(path.join( __dirname , 'public' , 'uploads' ))
form.uploadDir = path.join( __dirname , 'public' , 'uploads' )
// 3. 解析表单
form.parse(req , (err, fields, files) => {
if(err){
console.log(err)
res.send('上传失败')
}
else{
console.log(err, fields, files)
res.send('上传成功')
}
})
})
app.listen(5000 , function() {
console.log('Running...')
})
-
前端输入表单数据,选择图片后
发起请求
-
后台
收到请求并处理
,将结果打印在终端
-
上传图片
成功