一、將圖片上傳到服務(wù)器
1摹芙、添加圖片上傳框
在Vue組件的表單中添加圖片上傳框
<el-form-item label="圖標(biāo)">
<el-upload
class="avatar-uploader"
:action="$http.defaults.baseURL + '/upload'"
:show-file-list="false"
:on-success="afterUpload"
>
<img v-if="model.icon" :src="model.icon" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
其中：
- action：圖片上傳到服務(wù)器api接口驮吱；
- show-file-list：是否顯示已上傳的文件列表；
- on-success：文件上傳成功時(shí)的事件
2、添加服務(wù)器接口
(1)在服務(wù)器端建立uploads文件夾用來(lái)接受上傳的文件腐巢，并將uploads文件夾托管為靜態(tài)文件
app.use('/uploads', express.static(__dirname + '/uploads'))
(2)接收?qǐng)D片，并存放入uploads文件夾玄括，然后返回圖片的url地址冯丙，表單之后會(huì)將圖片的url上傳到服務(wù)器。
const multer = require('multer')
const upload = multer({dest: __dirname + '/../../uploads'})
app.post('/admin/api/upload',upload.single('file'), async (req, res) => {
const file = req.file
file.url = `http://localhost:3000/uploads/${file.filename}`
res.send(file)
})
其中：
multer是express官方推薦的文件上傳中間件遭京，它是在busboy的基礎(chǔ)上開(kāi)發(fā)的胃惜。
1.文件上傳有以下方法
muilter.single(‘file’), //適用于單文件上傳muilter.array(‘file’,num), //適用于多文件上傳，num為最多上傳個(gè)數(shù)哪雕，上傳文件的數(shù)量可以小于num,muilter.fields(fields), //適用于混合上傳船殉，比如A類文件1個(gè)，B類文件2個(gè)热监。官方API有詳細(xì)說(shuō)明捺弦。
2.file為上傳字段名稱，當(dāng)使用form表單submit方式上傳時(shí)孝扛，必須與表單上傳的name屬性保持一致列吼。 表單記得加上 enctype=‘multipart/form-data’
3.對(duì)上傳文件大小限制，名稱限制等均可在limits中加上苦始，具體可加屬性寞钥，請(qǐng)參考官方api。
3陌选、輸入框顯示上傳的圖片
使用on-success鉤子函數(shù)來(lái)處理服務(wù)器返回的數(shù)據(jù)理郑，當(dāng)上傳成功時(shí)在圖片上傳框中顯示上傳的圖片。
afterUpload(res) {
// 明確告訴vue賦值 model.icon = res.url
this.$set(this.model, 'icon', res.url)
// this.model.icon = res.url
},
注意：若使用this.model.icon = res.url賦值的話咨油，圖片上傳成功后不會(huì)在上傳框中顯示您炉。
二、在前端表格顯示圖片
在需要顯示圖片的Vue組件中役电，先請(qǐng)求服務(wù)器api接口赚爵，然后將圖片的url綁定到img標(biāo)簽的src屬性上。
<el-table-column prop="icon" label="圖標(biāo)">
<template slot-scope="scope">
<img :src="scope.row.icon" style="height: 3rem">
</template>
</el-table-column>
