前言
笔者最近弄了个个人博客网站，为了方便创作，因此弄了个上传文件的小功能，借此分享下上传文件的实现方法。
Express框架配合formidable可以快速实现这个需求，如果在工作的小伙伴有这方面的需求可以参考下！
formidable：一个用于解析表单数据、文件上传的 Node.js 模块。
我们先通过Express脚手架快速搭建一个服务器
express --no-view uploadSever
如图所示：
注意：
想通过脚手架需实现需确保本地环境有应用生成器工具 express-generator，可通过express -v检查。
npm install -g express-generator //下载express-generator
然后下载formidable模块，并进行相关配置
npm i formidable //下载formidable包
出于谨慎，笔者在配置之前会先测试下接口能不能正常使用。
由上图可以看到接口是没问题的，接下来就可以配置上传文件的接口了！
接下来就可以根据个人需求来进行配置了，详细参考官方文档
router.post('/uploader', (req, res, next) => {
//uploadDir：存放路径
//keepExtensions：是否保持原始文件的扩展名 image.png=>{true:image.png,false:image}
const form = formidable({ uploadDir: path.join(__dirname, '../public/files'),keepExtensions:true});
form.parse(req, (err, fields, files) => {
if (err) {
next(err);
return;
}
res.send({
message:'上传成功',
fields,
files
})
})
})
接下来就让我们测试下这个上传文件的接口有没有问题
为了节约时间（主要是懒!^_^），前端请求我就通过Ajax来实现，
<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>Document</title>
</head>
<body>
<input type="file" multiple="multiple" onchange="uploadFile()" class="upload">
<script>
function uploadFile() {
var formData = new FormData()
var file = document.getElementsByClassName('upload')[0].files[0] //获取文件对象
formData.append("file", file)//加入文件对象
//创建Ajax post请求
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.response))
}
}
xhr.open('post', 'http://127.0.0.1:3000/uploader')
xhr.send(formData);
}
</script>
</body>
</html>
效果如图：
emmm QAQ，喜提跨域问题，解决方案下载一个cors模块。
npm i cors
然后在app.js文件上引入cors模块，如图
引入好以后，让我们上传文件再次测试下，如图所示，成功！
但是这还没完，上面只是实现了一个简单的文件上传功能，而且只考虑到小文件上传。但有时候一些特殊场景要考虑到大文件上传切片问题以及数据安全的问题，后续笔者会抽空补上这方面的知识点。
