关于vue使用form上传文件

在vue中使用form表单上传文件文件的时候出现了一些问题，获取文件的时候一直返回null,

解决之后又出现发送到后台的file文件后台显示为空，解决源码

<template>
　　<div>
　　　　<Row>
　　　　　　<Col :sm="24" :md="24" lg:="24">

　　　　　　　　<form id="myForm" enctype="multipart/form-data" name="fileinfo" action="" target="uploadFrame">  //这里设置目标为iframe的name,这样提交表单数据的时候就不会刷新页面
　　　　　　　　　　<div class="img-file">
　　　　　　　　　　　　<label>请选择上传的文件:</label>
　　　　　　　　　　　　<input @change='changeImg' id='imgFile' type='file'/>
　　　　　　　　　　　　<!-- <input id="submit" type="submit" value="确认上传" /> -->
　　　　　　　　　　</div>
　　　　　　　　</form>
　　　　　　　　<iframe id="uploadFrame" name="uploadFrame" style="display:none;"></iframe>  //解决form表单提交数据刷新问题

　　　　　　　　<!-- 展示服务器返回的图片 -->
　　　　　　　　<div class="box1">
　　　　　　　　　　<div class="imgbox">
　　　　　　　　　　　　<img class="auto-img" :src='srcs' :id='ids'/>
　　　　　　　　　　</div>
　　　　　　　　　　<div class="texts" :dates="dates">{{dates}}</div>
　　　　　　　　</div>
　　　　　　</Col>
　　　　</Row>
　　</div>
</template>

<script>
　　import Cookies from 'js-cookie';
　　import axios from 'axios';
　　import qs from 'qs';
　　export default{
　　　　data(){
　　　　　　return{
　　　　　　　　//默认图片地址，地址通过动态修改
　　　　　　　　srcs: 'http://test.laihaiqiang.com/image/timg.jpg', 
　　　　　　　　// 图片id ，为了避免和标签的id冲突，尽量使用别称，如id1,ida等。
　　　　　　　　ids: 0,
　　　　　　　　// 创建时间
　　　　　　　　dates: '',

　　　　　　　　//文件
　　　　　　　　file: null,
　　　　　　}
　　　　},
　　　　methods:{
　　　　　　changeImg(){
　　　　　　　　var that = this;  //这里使用一个变量 that来拼接this,这样的话在内部就使用thar,在外部就使用this,这样就不会出现指向丢失问题。
　　　　　　　　var file = document.getElementById("imgFile").files[0]; //获取文件
　　　　　　　　that.file = file; 　//获取data里面的预设默认file,并把获取到的文件赋给它 
　　　　　　　　var ids = this.ids; //获取ata里面的id

　　　　　　　　var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加到FormData里面，这样就可以直接把formData作为参数传递了
　　　　　　　　if (file) {
　　　　　　　　　　formData.append("access_token", Cookies.get('Admin-Token')); //接口需要传递的参数
　　　　　　　　　　formData.append("img", file);　　　//接口需要传递的参数
　　　　　　　　　　formData.append("id", ids);　　　　//接口需要传递的参数
　　　　　　　　}

　　　　　　　　let potss = formData;
　　　　　　　　let urls = 'http://...........................';   //数据接口
　　　　　　　　axios.post(urls, potss)
　　　　　　　　.then(function(reh){
　　　　　　　　　　console.log('rehsdddddd===>>>', reh);
　　　　　　　　})
　　　　　　　　.catch(function(err){
　　　　　　　　　　console.log('err=ssss=>>', err);
　　　　　　　　})
　　　　　　},
　　　　},
　　　　created : function(){
　　　　　　var that = this;
　　　　　　console.log('1234567890987654321 ==> ', this.file);
　　　　　　let postToken = qs.stringify({
　　　　　　　access_token : Cookies.get('Admin-Token'),
　　　　　　})
　　　　　　let api = 'http://.....................................................';
　　　　　　axios.post(api, postToken)
　　　　　　.then(function(res){
　　　　　　　　console.log('resss===>>>', res);
　　　　　　　　console.log('code===>>>', res.data.code);
　　　　　　　　console.log('message===>>>', res.data.message);
　　　　　　　　console.log('logo图片地址==>>', res.data.data.img_url);
　　　　　　　　console.log('logo图片id==>>', res.data.data.id);
　　　　　　　　console.log('logo图片创建日期==>>', res.data.data.create_time);

　　　　　　　　// 修改图片的路径
　　　　　　　　that.srcs = res.data.data.img_url;
　　　　　　　　//图片创建时间
　　　　　　　　if(res.data.data.create_time == '' || res.data.data.create_time == null){
　　　　　　　　　　that.dates = '';
　　　　　　　　}else{
　　　　　　　　　　that.dates = '添加时间：' + res.data.data.create_time;
　　　　　　　　}
　　　　　　　　//图片id
　　　　　　　　that.ids = res.data.data.id;

　　　　　　})
　　　　　　.catch(function(err){
　　　　　　　　console.log('err=ssss=>>', err);
　　　　　　})
　　　　}
　　}
</script>

<style scoped>
　　.imgbox{
　　　　width:200px;
　　　　height:200px;
　　　　margin:0 auto;
　　　　border: 1px solid #0f0;
　　}
　　.texts{
　　　　width:100%;
　　　　margin:10px 0 0;
　　　　text-align: center;
　　}
　　.upbox{
　　　　width:100%;
　　　　margin:0 auto;
　　　　text-align: center;
　　}
　　.auto-img{
　　　　display: block;
　　　　width:100%;
　　}
　　.upload{
　　　　margin:30px 0;
　　}
　　.box1{
　　　　width:100%;
　　}
</style>