1. 程式人生 > >用nodeExpress做後臺的Vue模組化開發中elementUI圖片上傳的問題

用nodeExpress做後臺的Vue模組化開發中elementUI圖片上傳的問題

 最近在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。天,你在玩什麼?能給個明確的文件嘛。

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