elementui实现图片上传和表单提交，使用axios的post方法前端

看一下重点内容，然后再看代码，你就会很好理解了

第一步

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)

代码

原理，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;