前段代碼
Elementui代碼
<div id="elemenui_upload">
<el-upload
action="/localServer/users/upload"
ref="upload"
:auto-upload="false"
multiple
:limit="5"
:on-success="successUp"
>
<el-button slot="trigger" size="small" type="primary">
選擇圖片
</el-button>
<el-button size="small" type="success" @click="Onsubmit">
上傳至服務器
</el-button>
<div slot="tip" class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</el-upload>
</div>
<el-upload>標簽中的action屬性設置為expres服務器路由的地址铆隘，ref設置為upload熟尉，on-success為文件上傳成功事件，觸發(fā)事件熙卡，執(zhí)行successUp函數(shù)
第二個<el-button>即為提交按鈕杖刷，點擊執(zhí)行Onsubmit函數(shù)
iView代碼
<div id="ivew_upload">
<Upload action="/localServer/users/upload" :on-success="successUp">
<Button icon="ios-cloud-upload-outline">上傳圖片</Button>
</Upload>
</div>
iView的代碼比較簡潔，上傳圖片的按鈕點擊時再膳，會自動執(zhí)行submit挺勿，不用我們另外設置函數(shù)。
iView觸發(fā)on-success事件所執(zhí)行的函數(shù)與Elementui的一致
上述代碼的方法聲明
export default {
methods: {
Onsubmit() {
this.$refs.upload.submit();
},
successUp(response, file, fileList) {
console.log("通過127.0.0.1:7882\\" + response.file.path + "查看圖片");
},
},
};
this.$refs.upload.submit();表示找到ref為upload的組件喂柒，執(zhí)行submit函數(shù)不瓶，即可將圖片上傳至服務器
successUp函數(shù)有三個參數(shù)，response為服務器返回的響應灾杰，file為當前的文件對象蚊丐，fileList為當前文件列表
上圖為response返回的數(shù)據(jù)。path表示圖片存在服務器的位置艳吠，originalname表示在上傳前圖片在主機的原始名字
后端代碼
const express = require('express');
const router = express.Router();
const multer = require("multer");
const fs = require('fs');
const path = require('path');
var upload = multer({
storage: multer.diskStorage({
//設置文件存儲位置
destination: function (req, file, cb) {
let date = new Date();
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
let dir = "./uploads/" + year + month + day;
//判斷目錄是否存在麦备，沒有則創(chuàng)建
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, {
recursive: true
});
}
//dir就是上傳服務器成功的圖片的存放的目錄
cb(null, dir);
},
//設置文件名稱
filename: function (req, file, cb) {
let fileName = Date.now() + path.extname(file.originalname);
//fileName就是上傳文件的文件名
cb(null, fileName);
}
})
});
router.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.json({
file: req.file
})
})
module.exports = router;
需要使用到multer模塊，沒有的需要自行下載npm install multer -s
圖片上傳至服務器成功昭娩，會在src目錄下創(chuàng)建一個文件夾uploads凛篙，該文件夾下面還會創(chuàng)建子文件夾，名稱為圖片上傳成功時的年月日
res.json與res.send的作用基本一致栏渺，只是res.json返回的格式為json
注意
后端設置文件名稱時呛梆，最好不要用其他字符，以免通過靜態(tài)訪問失斂恼铩填物；
后端設置路由時也不要設置其他字符纹腌，_下劃線也不要設置；
前端配置代理時vue.config.js滞磺，自定義的代理名稱也最好不要帶有其他字符升薯，盡量使用駝峰命名法。
通過express靜態(tài)訪問圖片
在app.js文件中寫入app.use('/uploads', express.static('uploads'))击困，即可在瀏覽器中通過訪問127.0.0.1:express的端口/uploads/圖片上傳年月日/圖片名稱涎劈，查看圖片
