一、node基于Express项目实现文件的上传
1、FormData对象:以对象的方式来表示页面中的表单,又称为表单对象。以key-value的方式来保存数据,XMLHttpRequest对象可以轻松的表单对象发送的服务器端;
(1)使用构造函数实例化对象
//将页面中的表单form转换成FormData对象(即将表单数据转换成key-value对)
let formdata = new FormData(form);
(2)常用的API:
formData.append(key,value):追加数据。向formdata中追加key-value
formData.get(key):获取key对应的值
formData.delete(key):删除key对应的值
formData.has(key):判断formdata中是否有key
2、node使用formidable模块实现文件上传
(1)安装:npm install formidable
(2)创建Formidable.IncomingForm对象:本质是一个表单对象
let form = new Formidable.IncomingForm()
(3)Formidable.IncomingForm对象的属性:
form.encoding : 设置字符集
form.uploadDir:设置上传文件的保存路径
form.keepExtensions:true,表示上传时保留原来的扩展名
(4)Formidable.IncomingForm对象的方法:
form.parse(request, [callback]):转换请求中的表单数据
(5)Formidable.File对象的属性
size:上传文件的大小
path:上传文件的路径
type:上传文件的类型
name:上传的文件名
3、示例:
(1)前端页面包含表单的所有数据(包含头像文件),代码如下
html:
js中对数据进行打包,代码如下
// 注册按钮
$('.btn_reg').bind('click', () => {
//将表单数据打包至formdata对象中
let formdata = new FormData();
//使用对象的append方法将数据以键值对的形式保存
formdata.append('registerName', $('.userName').val());
formdata.append('registerPhone', $('.userPhone').val());
formdata.append('registerPwd', $('.password').val());
formdata.append('registerSex', $('.uerSex').val());
formdata.append('registerEmail', $('.userEmail').val());
formdata.append('headImage', $('#file')[0].files[0]);
//使用jQery的ajax
$.ajax({
//后台注册接口
url: 'http://localhost:8099/movieUser/addUser',
type: 'post',
data: formdata,
cache: false,
contentType: false,
processData: false,
success: function (res) {
if (res.code == 2000) {
window.parent.location.reload(); //刷新页面
}
}
})
});
//显示上传图像
function show(imgFile) {
$('#img').attr('src', window.URL.createObjectURL(imgFile.files[0]))
}
(2)后台服务控制层中使用formidable模块接收数据
对应dao层操作数据库的函数
//保存用户信息(向数据库中增加记录)
insertUser: async (user)=>{//user参数,由服务层对表单请求对象进行封装,并传入
const result = await movie_userModel.create(
{
user_name:user.name,
password: user.password,
user_email:user.email,
user_sex:user.sex,
user_phone: user.phone,
head_portrait: user.head_portrait,//头像上传服务器保存的地址
register_time: user.time,
}
);
return result;
},
二、Express实现文件下载
使用res对象(响应对象)的download方法即可
实现思路:遍历下载文件夹下的文件,拼接成一个下载的url,传递到前端
代码示例如下:
后台接口
// 遍历下载文件夹的接口:http://localhost:8089/updown/getfiles
router.get('/getfiles',(req, res) => {
//1.遍历下载文件夹:public/images/uploads
let filePath = path.join(__dirname,'../../public/images/uploads/') //下载文件夹
let url_arr = [] //存放下载的url
fs.readdir(filePath,(err,files)=>{ //files参数中存放的filePath下的子目录名和文件名
if (err){
console.log(err)
}else{
for(let i=0;i<files.length;i++){
let fileDir = path.join(filePath,files[i])
if (fs.statSync(fileDir).isFile()){ //表示当前的files[i]是一个文件
let urlObj = {
fileName: files[i], //文件名
downloadUrl: `http://localhost:8089/updown/download?fileName=${files[i]}`
}
url_arr.push(urlObj) //把要下载的文件路径、文件放入数组中
}
}
res.json(url_arr);//将数据响应给前端
}
})
})
前端页面:
<body>
<div id="box"></div>
<script src="./js/jquery-3.4.1.js"></script>
<script>
$(function(){
$.ajax({
url: 'http://localhost:8089/updown/getfiles',
type:'get',
dataType:'json',
success: function(result){
for(let data of result){
$('#box').append(`<a href=${data.downloadUrl}>下载${data.fileName}</a><br><br>`)
}
}
})
})
</script>
</body>