最近在Vue模組化開發中用到了elementUI中圖片上傳的功能，可是把我折騰的夠嗆，花了兩天時間各種查API請教大佬最後解決了問題，希望我的問題可以在某個時候幫助各位。最後多嘴一句 elementUI的API該更新了！

element官網：http://element-cn.eleme.io/#/zh-CN

首先我前臺上傳的程式碼是這樣的：

<el-upload
              class="upload-demo"
              id="lk-upload"
              action="http://localhost:8888/upload"
              :on-preview="handlePreview"
              :beforeUpload="beforeAvatarUpload"
              :on-progress="onProgress"
              :on-success="onSuccess1"
              :file-list="fileList2"
              :limit="1"
              :on-exceed="aaa"
              list-type="picture">
              <el-button size="small" type="primary">點選上傳</el-button>
              <div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過10M</div>
            </el-upload>
 

重點是action，它是上傳的目標地址，必選引數，型別string。這是重點，這裡配置的是我後臺的埠和介面資訊（前後臺的埠是不一樣的，所以後臺需要配置跨域）。Vue部分就只有這些了。下面是後臺部分。

這裡給個連結，這位大佬配置的跨域很棒，參考一下就ok：https://www.cnblogs.com/xuange306/p/6185453.html

其次需要一個npm一個檔案上傳的模組：

       npm  i  multer  -D

然後在專案裡建一個utils資料夾，在裡面建一個multer.js檔案，這個是用來解析前臺圖片，然後儲存：

var multer = require('multer');

var storage = multer.diskStorage({
  destination: function (req, file, cb) { //指定硬碟的路徑，檔案儲存的地方
    cb(null, './public/upload')
  },
  filename: function (req, file, cb) {//指定檔名和拓展名
    //originalname 檔名
    var arr = file.originalname.split('.');
    // cb(null, arr[0] + '.' + arr[1]);
    cb(null, arr[0] + '-' + Date.now() + '.' + arr[1]);
  }
});

var upload = multer({storage: storage});

module.exports = upload;
 

然後在app.js匯入這個模組：

var multer=require('./utils/multer.js');

然後app.js配置介面，用multer處理前臺的請求：

app.post('/upload',multer.array('file',5),function (req,res) {
  console.log('成功');
  res.send({error:0,res:req.files});
});

重點到了！我一直是卡在這一步。問題就在multer.array(‘前臺發過來的名稱’，最大處理個數)。這個名稱我一般用的是files，因為一般都是多個上傳，但是！element用的是file。API沒有說明，我也一直錯誤的理解，目前為止我還不確定是否還有別的名稱。然而我在console.log(req.file)的時候，控制檯說沒有file這個東西？這個時候又變成了files。天，你在玩什麼？能給個明確的文件嘛。

對。其實很簡單的嘛，你給個文件啊。各位有不明白的地方可以給我留言。