Express+Vue2+Element-ui上传图片操作

简介: Express+Vue2+Element-ui上传图片操作

Express+Vue2+Element-ui上传图片操作

1、Express创建upload目录

2、app.js中

app.use('/upload',express.static('upload'))

3、安装multiparty模块

npm i multiparty

4、router/student.js 中

const express = require('express')
let router = express.Router()
const multiparty = require("multiparty")
router.post("/upImg",(req,res)=>{
    let form = new multiparty.Form()
    form.uploadDir = "upload"
    form.parse(req,(err,formData,imgData)=>{
        res.send({
            imgPath:`http://localhost:3000/${imgData.file[0].path}`
        })
    })
})
module.exports = router

5、Vue组件中

<el-form-item label="头像">
    <el-upload
        class="upload-demo"
        action="http://localhost:3000/student/upImg"  //后台上传图片接口
        :file-list="fileList"
        :on-success="handleAvatarSuccess"
    >
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
</el-form-item>
data(){
    return{
        imageUrl: '', //添加完成需置空
        fileList:[],  //添加完成需置空
    }
}
methods:{
    handleAvatarSuccess(res, file) {
        this.imageUrl = res.imgPath  //后端返回的图片路径
    },
}

6、渲染图片

<el-table-column
    prop="src"
    label="头像">
        <template slot-scope="scope">
            <img :src="scope.row.src" alt="" style="width: 100px;border-radius: 50px;height: 100px">
        </template>
</el-table-column>
相关文章
|
3月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
4月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
279 49
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
165 0
|
4月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
4月前
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
166 1
|
4月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
224 0
|
4月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
103 0
|
4月前
|
JavaScript 容器
Vue+Element UI
该博客文章介绍了如何在Vue中集成Element UI来构建后台管理系统的左侧菜单,包括使用`el-menu`、`el-submenu`和`el-menu-item`等组件,并通过Vue router动态构建菜单项及其路由设置。
|
5月前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
167 5
|
5月前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
75 1