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})
 })