Express + Element-ui 實現圖片/文件上傳

使用第三方插件 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.avatar
      console.log(res) // 本例中是  { avatar: 'xxx.jpg' }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!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) //把擴展名前的文件名給替換掉
	//我這里為了方便存儲 統一將文件名改為 <用戶名>.jpg
    let 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 })              		
      	})
      })
  })
})