目录
项目开发流程
把前端给的文件一一归类。
1、html页面放在views文件夹
2、静态资源放在static或public
3、配置一些post中间件（因为要接收post传递过来的参数）
4、配置开放静态资源的中间件
文件上传
前端
当表单中含有文件上传的表单项<input type="file" name="pic">时，则要把表单编码格式改为如下的格式：
<form action="/doupload" method="post" enctype="multipart/form-data">
<div>帐号：<input type="text" name="usr"></div>
<div>密码：<input type="password" name="pwd"></div>
<div>密码：<input type="password" name="repwd"></div>
<div>头像：<input type="file" name="pic"></div>
<div><input type="submit" value="注册"></div>
</form>后端
使用第三方formidable包来处理含有文件上传的表单，代码如下：
注意：在当前项目的根目录安装formidable包： npm i formidable
const experss = require('express');
const path = require('path');
const fs = require('fs');
//引用
const formidable = require('formidable');
var svgCaptcha = require('svg-captcha');
const app = experss();
app.listen(3000, () => {
console.log(`web服务器工作在3000端口`);
});
//文件上传界面：
app.get('/uploads', (req, res) => {
res.sendFile(path.join(__dirname, 'users.html'));
});
//处理含有文件上传的表单
app.post('/doupload', (req, res) => {
let filePath = path.join(__dirname, 'uploads');
//判断目录或文件是否存在：
if (!fs.existsSync(filePath)) { //目录不存在时
fs.mkdirSync(filePath); //创建目录
}
//uploadDir:设置文件上传成功后的存放位置
const form = formidable({ multiples: true, uploadDir: filePath });
form.parse(req, (err, fields, files) => {
console.log(err, fields, files, 111);
res.send('OK')
}
});
});服务器处理完毕响应结果
保留原文件名：
生成及其他文件名：
1）年月日时分秒 + 8位随机数
2）使用第三方模块uuid(uuid包用来产生唯一字符串，这个唯一字符串可以作为改名之后的文件名),使用方法：uuid - npm。
const experss = require('express');
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');
var svgCaptcha = require('svg-captcha');
const app = experss();
app.listen(3000, () => {
console.log(`web服务器工作在3000端口`);
});
//文件上传界面：
app.get('/uploads', (req, res) => {
res.sendFile(path.join(__dirname, 'users.html'));
});
//处理含有文件上传的表单
app.post('/doupload', (req, res) => {
let filePath = path.join(__dirname, 'uploads');
//判断目录或文件是否存在：
if (!fs.existsSync(filePath)) { //目录不存在时
fs.mkdirSync(filePath); //创建目录
}
//uploadDir:设置文件上传成功后的存放位置
const form = formidable({ multiples: true, uploadDir: filePath });
// console.log(form, 333);
form.parse(req, (err, fields, files) => {
// console.log(err, fields, files, 111);
if (err) { //表单处理失败
res.send('表单处理失败');
} else { //表单处理成功
//获取用户选择的要上传文件的文件名:
let ufilename = files.pic.originalFilename;
//获取用户选择的要上传文件的文件扩展名：
let extNames = path.extname(ufilename);
// console.log(extNames, 666);
//生成新文件名: 完整文件名=文件名.扩展名
let fullname = `${files.pic.newFilename}${extNames}`
//将上传成功后生成的临时文件名改为正式文件名
fs.renameSync(files.pic.filepath, `${filePath}/${fullname}`);
res.send('OK')
}
});
});使用jquery的ajax方法实现文件上传时要注意的事项：
data: new FormData($("#upfile")[0]), //文件上传的表单
processData: false, //设置jquery不处理表单数据
contentType: false, //设置jquery不处理表单编码
在使用ajax实现文件上传需要验证用户身份时，用户身份数据(JWT数据)可以通过表单的隐藏域或ajax的请求头将用户身份数据发送到服务端。
<div class="my_icon">
<form id="upfile">
<span>头像</span>
<a href="javascript:;">
<!-- type="hidden":隐藏域 -->
<input type="hidden" name="uid" id="uid">
<img src="../img/login/user.png" class="myIcon" />
<div class="change">
更换头像
<input name="pic" accept=".gif,.png,.jpg,.jpeg" type="file" class="btn_file" onchange="uploadHeaImg()" />
</div>
</a>
</form>
</div>
<script>
function uploadHeaImg() 
文章评论