elementui实现图片上传和表单提交，使用axios的pos

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

第一步

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;