上传步骤:
1-express下app.js文件配置静态目录
app.use('/upload', express.static('upload'))
2-安装multiparty模块
npm i multiparty
3-导入multiparty模块,并编写上传文件接口
var multiparty = require('multiparty')
var express = require('express');
var router = express.Router();
router.post('/uploadImg', (req, res) => {
let form = new multiparty.Form()
form.uploadDir = 'upload'
form.parse(req, (err, formData, imgData) => {
res.send({
img: 'http://localhost:3000/' + imgData.file[0].path
})
})
})
4-element-ui中upload使用方法
<el-form-item label="头像:" label-width="100px" prop="img">
<el-upload ref="upload" action="http://localhost:3000/uploadImg" :on-success="success">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
5-element-ui中upload图片上传成功后钩子函数
success(res) {
this.userinfo.img = res.img;
},
6-在页面的表格中使用插槽显示图片
<el-table-column label="头像">
<template slot-scope="scope">
<el-image style="width: 100px" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
</template>
</el-table-column>