一、将图片上传到服务器
1、添加图片上传框
在Vue组件的表单中添加图片上传框
<el-form-item label="图标">
<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：图片上传到服务器api接口；
- show-file-list：是否显示已上传的文件列表；
- on-success：文件上传成功时的事件
2、添加服务器接口
(1)在服务器端建立uploads文件夹用来接受上传的文件，并将uploads文件夹托管为静态文件
app.use('/uploads', express.static(__dirname + '/uploads'))
(2)接收图片，并存放入uploads文件夹，然后返回图片的url地址，表单之后会将图片的url上传到服务器。
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的基础上开发的。
1.文件上传有以下方法
muilter.single(‘file’), //适用于单文件上传muilter.array(‘file’,num), //适用于多文件上传，num为最多上传个数，上传文件的数量可以小于num,muilter.fields(fields), //适用于混合上传，比如A类文件1个，B类文件2个。官方API有详细说明。
2.file为上传字段名称，当使用form表单submit方式上传时，必须与表单上传的name属性保持一致。 表单记得加上 enctype=‘multipart/form-data’
3.对上传文件大小限制，名称限制等均可在limits中加上，具体可加属性，请参考官方api。
3、输入框显示上传的图片
使用on-success钩子函数来处理服务器返回的数据，当上传成功时在图片上传框中显示上传的图片。
afterUpload(res) {
// 明确告诉vue赋值 model.icon = res.url
this.$set(this.model, 'icon', res.url)
// this.model.icon = res.url
},
注意：若使用this.model.icon = res.url赋值的话，图片上传成功后不会在上传框中显示。
二、在前端表格显示图片
在需要显示图片的Vue组件中，先请求服务器api接口，然后将图片的url绑定到img标签的src属性上。
<el-table-column prop="icon" label="图标">
<template slot-scope="scope">
<img :src="scope.row.icon" style="height: 3rem">
</template>
</el-table-column>
