使用第三方插件 formidable 處理表單數(shù)據(jù)/文件

Express 4 以前，我們通常使用 req.files 來對(duì)請(qǐng)求中的文件進(jìn)行處理，但在 Express 4 中這種用法已經(jīng)被拋棄，默認(rèn)情況下 req.files 在 req 對(duì)象上不再可用。官方推薦我們使用第三方中間件。

在這里我們使用第三方中間件 formidable，可用于解析表單數(shù)據(jù)和上傳的文件。以下是基本使用：

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 表單數(shù)據(jù)console.log(files) //上傳文件用files.<name>訪問res.json({ code: 1, message: 'upload success' })}) })

Element-ui -- upload 上傳組件

前端框架使用Vue2， 以頭像上傳為例。

<el-upload :action="$apiURL + '/upload'" <!--后臺(tái)上傳地址--> :data="uploadData" <!--需要傳到后臺(tái)的附加數(shù)據(jù) 我這里把用戶名傳了過去-->:show-file-list="false" :on-success="getAvatarSuccess" <!--上傳成功回調(diào)--> :before-upload="beforeAvatarUpload"> <!--上傳前調(diào)用的鉤子--> <img :src="$imageURL + avatar" class="avatar" /> </el-upload> export default {data(){return {avatar: '', //頭像文件名 使用時(shí)需要拼接形成完整路徑uploadData: {//使用 vuex 將用戶名放在了 state 中 便于存取name: this.$store.state.username}}},methods: {getAvatarSuccess(res, file) {// res是響應(yīng)數(shù)據(jù) 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 時(shí)進(jìn)行請(qǐng)求上傳return isJPG && isLt2M }} }

Express 中使用 formidable 處理請(qǐng)求做出響應(yīng)

app.post('/upload', (req, res, next) => {let form = new formidable.IncomingForm()form.encoding = 'utf-8' // 編碼form.keepExtensions = true // 保留擴(kuò)展名form.uploadDir = path.join(__dirname, '../public/images/') //文件存儲(chǔ)路徑 最后要注意加 '/' 否則會(huì)被存在public下form.parse(req, (err, fileds ,files) => { // 解析 formData 數(shù)據(jù)if(err) return next(err) let username = fileds.name //用戶名 用于修改用戶頭像路徑let oldPath = files.file.path //獲取文件路徑 ~/public/images/<隨機(jī)生成的文件名>.<擴(kuò)展名>let imgname = files.file.name //前臺(tái)上傳時(shí)的文件名 也就是文件原本的名字let userImgname = imgname.replace(/[^.]+/, username) //把擴(kuò)展名前的文件名給替換掉//我這里為了方便存儲(chǔ) 統(tǒng)一將文件名改為 <用戶名>.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 }) })})}) })

轉(zhuǎn)載于:https://www.cnblogs.com/qimeng/p/9552275.html

總結(jié)

以上是生活随笔為你收集整理的Express + Element-ui 实现图片/文件上传的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。