看一下重点内容，然后再看代码，你就会很好理解了
第一步
upLoad图片上传组件中
:before-upload="beforeupload" 方法中return为false 来进行阻止action上传地址，必填项上传图片
第二步创建一个变量
param:new FormData();//表单上传的方法
第三步
把所需的表单参数和图片地址参数追加到创建的表单方法中param
this.param.append('u_icon', file);//在beforeupload事件中
var form = this.form;
this.param.append('username', form.username);
this.param.append('user_id', form.user_id);
第四步
在axios中传入param参数和config的参数就行了
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
axios.post(baseUrl+"/one/editmyprofile/",data,config)
代码
<!--这个组件主要用来研究upload这个elementui的上传插件组件-->
<template>
<div id="upload">
<label class="el-form-item__label" style="width: 80px;">
头像
</label>
<!--elementui的上传图片的upload组件-->
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:before-upload="beforeupload">
<img v-if="src" :src="src" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!--elementui的form组件-->
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.username" name="names" style="width:360px;"></el-input>
</el-form-item>
<!-- <el-form-item label="手机号">
<el-input v-model="form.phonenumber" name="names" style="width:360px;"></el-input>
</el-form-item> -->
<el-form-item label="邮箱">
<el-input v-model="form.email" name="names" style="width:360px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import url from '../../common/api'
export default {
data() {
return {
form: {//form里面的参数
username: '',
user_id : 10,
// phonenumber:'',
email:'',
},
param:new FormData(),//表单要提交的参数
src:"", //展示图片的地址
};
},
methods: {
//阻止upload的自己上传，进行再操作
beforeupload(file) {
console.log(file);
//创建临时的路径来展示图片
var windowURL = window.URL || window.webkitURL;
this.src=windowURL.createObjectURL(file);
this.param.append('u_icon', file);
return false;
},
onSubmit(){//表单提交的事件
var form = this.form;
this.param.append('username', form.username);
this.param.append('user_id', form.user_id);
// this.param.append('phonenumber', form.phonenumber);
this.param.append('email', form.email);
--------url引用中的设置
getData.UserInformation = (data)=>{
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
return http.post(baseUrl+"/one/editmyprofile/",data,config)
}
-------
url.UserInformation(this.param).then(res=>{
console.log(res,'------成功发送验证码')
}).catch(err=>{
console.log(err,'-------失败发送验证码')
})
}
}
}
</script>
<style lang="stylus" scoped>
>>>.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: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
>>>.avatar {
width: 100px;
height: 100px;
display: block;
}
</style>
原理，form表单的数据就是new FormData()，这样就是算是form表单提交模拟了
后端代码参考
通过上面的组件，在post中传输后，后台接受通过fomidable插件来处，这里用的是node，把图片和表单的数据保到数据库和本地的静态资源文件夹里面，如下面：
//这个是后台的routers文件夹下面的upload.js文件
var express = require('express');
var router = express.Router();
var handler = require('./dbhandler.js'); //封装的mongodb的增删改查和分页基本操作的文件；
var ObjectId = require('mongodb').ObjectId; //对mongo的_id处理的插件；
var formidable = require('formidable');
var fs = require("fs");
router.post("/",function(req,res,next){
var form = new formidable.IncomingForm();
//设置文件上传存放地址
//form.uploadDir = "./public/images";
//执行里面的回调函数的时候，表单已经全部接收完毕了。
form.parse(req, function(err, fields, files) {
console.log("files:",files) //这里能获取到图片的信息
console.log("fields:",fields) //这里能获取到传的参数的信息，如上面的message参数，可以通过fields。message来得到
})
})
module.exports = router;
