node + multer存儲element-ui上傳的圖片

說明

element-ui的Upload組件可以幫助我們上傳我們的圖片到我們的服務器，可以使用action參數上傳圖片，也可以使用http-request自定義上傳方式。這里我們使用自定義的方式上傳。

前端代碼

我們只是自定義了一個 upload方法，里面進行發送我們的請求,使用了FormData對象，它將數據編譯成鍵值對，其主要用於發送表單數據。

<template>
 <div id="app">
   <h3>頭像上傳</h3>
   <el-upload
     class="avatar-uploader"
     action="http://localhost:3003/upLoad"
     :show-file-list="false"
     :http-request="upload"
   >
     <img v-if="imageUrl" :src="imageUrl" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>
 </div>
</template>
<script>
  methods:{
    upload(f){

      let formData = new FormData()
      formData.append('file', f.file)

      axios({
        method: 'post',
        url: 'http://localhost:3003/upLoad',
        data:formData
      }).then(res =>{
           //上傳成功之后 顯示圖片
          this.imageUrl = res.data.url
      })
    }
  }
</script>

后台代碼

• node + express

 //app文件
 const express = require('express')
 const app = express()

 //解決跨域
 app.all('*',function (req, res, next) {
     res.header('Access-Control-Allow-Origin', '*');
     res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
     res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
     if (req.method == 'OPTIONS') {
         res.send(200);
     }else {
         next();
     }
 });

 //引入router.js路由文件
 const router = require('./router/router.js')

 //暴漏靜態資源文件 暴漏之后我們可以通過域名訪問該文件下的資源
 app.use(express.static('upload'))

 app.use(router)

 app.listen(3003, function(){
     console.log('已經創建好服務器，可以連接了...')
 })

• router文件

  這里使用了multer中文文檔中間件，處理我們上傳的圖片，storage配置了圖片的存儲路徑，以及文件名和后綴名。在路由 upLoad中使用 upload.single('file') 獲得我們存儲的信息，這里的file與FormData的 鍵 一致。之后返回服務器存儲圖片的地址返回給客戶端即可。

 //router.js文件
 const express = require('express')
 const router = express.Router()
 const multer = require('multer')
 
 //上傳的文件保存在 upload
 const storage = multer.diskStorage({
     //存儲的位置
     destination(req, file, cb){
         cb(null, 'upload/')
     },
     //文件名字的確定 multer默認幫我們取一個沒有擴展名的文件名，因此需要我們自己定義
     filename(req, file, cb){
         cb(null, Date.now() + file.originalname)
     }
 })

 //傳入storage 除了這個參數我們還可以傳入dest等參數
 const upload = multer({storage})
 router.post('/upLoad', upload.single('file'), (req, res) =>{
    
    //給客戶端返回圖片的訪問地址 域名 + 文件名字 
    //因為在 app.js文件里面我們已經向外暴漏了存儲圖片的文件夾 uploa
     const url = 'http://localhost:3003/' + req.file.filename
     res.json({url})
 })