vue圖片上傳幕袱，使用elementui上傳組件
前端選擇圖片后访得，立即上傳（也可以手動(dòng)上傳）
后臺(tái)koa監(jiān)聽請(qǐng)求路由州既，處理數(shù)據(jù)氮凝，將上傳的圖片生成一個(gè)url返回給前端
前端將url羔巢，連同別的數(shù)據(jù)一并提交給后端，寫入數(shù)據(jù)庫
vue前端代碼部分
<el-upload
action="http://localhost:3001/api/upload" //上傳圖片的地址
list-type="picture-card" //選擇后縮略圖展示
multiple //允許選擇多圖
:on-preview="preview" //點(diǎn)擊查看圖片預(yù)覽的處理方法
:on-success="afterSuccessUpload" //自動(dòng)上傳成功后的回調(diào)
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible"> //下面是圖片縮略圖部分
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
methods方法：
preview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
afterSuccessUpload(file) {
console.log(file) //上傳成功后罩阵，后臺(tái)會(huì)返回前臺(tái)一個(gè)圖片鏈接竿秆，把這個(gè)鏈接后續(xù)寫入數(shù)據(jù)庫
},
下面是koa后臺(tái)的處理方法，需要使用koa-multer插件
一般會(huì)先去封裝一個(gè)upload方法稿壁，放到models目錄里幽钢，供后續(xù)代碼使用
koa后臺(tái)路由監(jiān)聽post的上傳請(qǐng)求，然后通過調(diào)用upload方法傅是，處理上傳文件匪燕，生成鏈接蕾羊，返回給前端
首先是封裝upload.js代碼部分
const multer = require('koa-multer')
const path=require("path");
const destPath=path.join(__dirname,"../uploadImgs");
//配置
var storage = multer.diskStorage({
//文件保存路徑
destination: function (req, file, cb) {
cb(null, destPath)
},
//修改文件名稱
filename: function (req, file, cb) {
var fileFormat = (file.originalname).split("."); //以點(diǎn)分割成數(shù)組，數(shù)組的最后一項(xiàng)就是后綴名
cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
//加載配置
var upload = multer({
storage: storage,
limits: {
fileSize: 1024*1024/2 // 限制512KB
}
});
module.exports=upload;
將上述模塊暴露出去以后帽驯，koa路由處理方法龟再，就可以使用了
koa后臺(tái)監(jiān)聽post請(qǐng)求，將圖片上傳后生成鏈接返回前端
const upload = require("../models/upload.js")
router.post('/upload', upload.single('file'), async (ctx, next) => {
ctx.body = {
filename: ctx.req.file.filename
}
})
這樣前端就會(huì)獲得一個(gè)圖片鏈接尼变，前端和別的數(shù)據(jù)一并傳給后端利凑，寫入數(shù)據(jù)庫
·······························································································
下面是vue+koa上傳到七牛云的案例
前端要上傳圖片到七牛云，需要有一個(gè)token進(jìn)行授權(quán)操作
難點(diǎn)在于要使用后端koa生成一個(gè)token授權(quán)給前端
每次需要上傳前享甸，前端向后端申請(qǐng)一個(gè)token
前端直傳圖片到七牛云截碴，七牛云返回前端一個(gè)圖片url
前端把url連同別的信息梳侨，一并提交給后臺(tái)蛉威，寫入數(shù)據(jù)庫
第一，服務(wù)端頒發(fā)上傳憑證到前端走哺，前端攜帶憑證蚯嫌，采用“客戶端直傳”的方式直接上傳到七牛云。
先寫后端部分吧丙躏，需要使用到官方提供的node.js sdk
1. 安裝七牛云依賴 npm i qiniu
2. 在api模塊引入七牛云 const qiniu = require("qiniu");
生成token部分代碼如下
router.get("/getuploadtoken", async (ctx, next) => {
const accessKey = 'MxExXov-'; //秘鑰管理中的AK
const secretKey = 'ETapkF'; //秘鑰管理中的SK
const bucket = "vueimgs"; //創(chuàng)建的存儲(chǔ)空間文件夾名字
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const options = {
scope: bucket,
expires: 3600 * 24, //過期時(shí)間
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const uploadToken = putPolicy.uploadToken(mac);
ctx.body = uploadToken; //當(dāng)前端請(qǐng)求獲得token的時(shí)候择示，就把生成的token返回給前端
})
vue前端部分
<el-upload
action="http://upload.qiniup.com" //這個(gè)地址，和七牛上創(chuàng)建時(shí)選擇的區(qū)域有關(guān)
list-type="picture-card"
:on-preview="preview"
:on-success="afterSuccessUpload"
:data="postData"
>
<i class="el-icon-plus"></i>
</el-upload>
其中的 :data="postData"是用來放七牛云的token的
data里面需要放一個(gè)postData: { token:"" }
created里面進(jìn)入即調(diào)用一個(gè)methods里面定義的方法晒旅，獲取token的方法
getUploadToken(){
this.$http.get("/getuploadtoken")
.then(res=>{
this.postData.token=res.data;
})
}
一進(jìn)入上傳頁面栅盲，即請(qǐng)求token
afterSuccessUpload(res) {
this.form.img = "http://py0mg402k.bkt.clouddn.com/" + res.key;
},
選中圖片后直接上傳，上傳后七牛返回給前端一個(gè)res废恋，把bucket文件url+res.key即可生成圖片鏈接
