使用第三方插件 formidable 处理表单数据/文件

Express 4 以前，我们通常使用 req.files 来对请求中的文件进行处理，但在 Express 4 中这种用法已经被抛弃，默认情况下 req.files 在 req 对象上不再可用。官方推荐我们使用第三方中间件。

在这里我们使用第三方中间件 formidable，可用于解析表单数据和上传的文件。以下是基本使用：

var formidable = require('formidable')app.post('/upload', (req, res, next) => {var form = new formidable.IncomingForm()form.parse(req, (err, fields, files) => {if(err) return next(err)console.log(fields) //Object 表单数据console.log(files) //上传文件用files.<name>访问res.json({ code: 1, message: 'upload success' })})
})

Element-ui -- upload 上传组件

前端框架使用Vue2， 以头像上传为例。

<el-upload :action="$apiURL + '/upload'" <!--后台上传地址--> :data="uploadData" <!--需要传到后台的附加数据 我这里把用户名传了过去-->:show-file-list="false" :on-success="getAvatarSuccess" <!--上传成功回调--> :before-upload="beforeAvatarUpload"> <!--上传前调用的钩子--> <img :src="$imageURL + avatar" class="avatar" />
</el-upload>

export default {data(){return {avatar: '', //头像文件名 使用时需要拼接形成完整路径uploadData: {//使用 vuex 将用户名放在了 state 中 便于存取name: this.$store.state.username}}},methods: {getAvatarSuccess(res, file) {// res是响应数据 file是文件信息this.avatar = res.avatarconsole.log(res) // 本例中是  { avatar: 'xxx.jpg' }},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg'const isLt2M = file.size / 1024 / 1024 < 2if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!')}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')}//返回 true 时进行请求上传return isJPG && isLt2M }}
}

Express 中使用 formidable 处理请求做出响应

app.post('/upload', (req, res, next) => {let form = new formidable.IncomingForm()form.encoding = 'utf-8' // 编码form.keepExtensions = true // 保留扩展名form.uploadDir = path.join(__dirname, '../public/images/') //文件存储路径 最后要注意加 '/' 否则会被存在public下form.parse(req, (err, fileds ,files) => { // 解析 formData 数据if(err) return next(err) let username = fileds.name //用户名 用于修改用户头像路径let oldPath = files.file.path //获取文件路径 ~/public/images/<随机生成的文件名>.<扩展名>let imgname = files.file.name //前台上传时的文件名 也就是文件原本的名字let userImgname = imgname.replace(/[^.]+/, username) //把扩展名前的文件名给替换掉//我这里为了方便存储 统一将文件名改为 <用户名>.jpglet newPath = path.join(path.dirname(oldPath), userImgname) fs.rename(oldPath, newPath, (err) => {if(err) return next(err)Model.User.updateOne({ name: username },  //更新用户的avatar属性{ avatar: userImgname }, err => {if(err) return next(err)res.json({ avatar: userImgname })                     })})})
})