Element ui upload组件图片上传

项目场景：

前端使用vue脚手架Element ui 组件

后端使用nodejs

---

前端代码

1.使用Element ui 组件 引入Element ui 组件到全局使用

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
// import store from './store'
import router from './router'
// import 'animate.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.prototype.axios = axios
axios.defaults.baseURL = 'http://127.0.0.1:8000'
Vue.use(ElementUI);
const vm = new Vue({
  el:'#app',
  // store,
  router,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.bus = this
  }
})

2.组件的使用

// upload组件一般用于form表单中图片上传
<el-upload
	class="avatar-uploader"
	action="http://127.0.0.1:8000/upload"
	:show-file-list="false"
	:on-success="handleAvatarSuccess"
	>
	<img v-if="ruleForm.img" :src="ruleForm.img" class="avatar"/>
	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

// methods 中的handleAvatarSuccess事件代码钩子函数用来接收服务器上传成功发送回来的数据
// 一般是用来接收服务器返回加工处理过的图片路径

handleAvatarSuccess(err, file, fileList) {
    
	console.log(fileList[0]);
    // 获取图片保存的地址,一般是经过后端加工处理过的路径
	this.ruleForm.img = fileList[0].response.path;
},

// 样式
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
 .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

后端代码：

const express = require('express')
const multiparty = require('multiparty')
const {model} = require('../models/model')
const router = express.Router()


router.post('/upload',(req,res)=>{
    const form = new multiparty.Form()
    form.uploadDir= './upload'
    form.parse(req,(err,fileds,files)=>{
        console.log(files);
        res.send({
            code:200,
            msg:'上传成功',
            path:'http://127.0.0.1:8000/'+files.file[0].path
        })
    })
})