在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>