上传图片-node【express】Vue【element-ui】

上传步骤：

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>