话不多说,直接贴代码
<template>
<div>
<input type="file" name="fileUpload" id = "input_updata" @change="change($event)" ref="inputFile" >
<input type="submit" value="提交" id = "btn_updata" @click = "updata">
<!-- 文件上传 -->
</div>
</template>
<style>
#input_updata{
background: rgba(11,164,255,0.2);
color: #fff;
transition: all 0.3s;
}
#input_updata:hover{
background: rgba(11,164,255,0.5);
}
#btn_updata{
background: rgba(11,164,255,0.2);
height:27px;width:50px;
color: #fff;
transition: all 0.3s;
border-left: 1px solid rgba(11,164,255,1);
}
#btn_updata:hover{
background: rgba(11,164,255,0.5);
}
</style>
<script>
import qs from 'qs'
import $http from 'axios'
export default {
data() {
return {
file:[]
}
},
created(){
},
mounted(){
},
methods: {
change(event){
console.log('文件上传',event.target.files[0])
this.file = event.target.files[0]
},
updata(){
console.log('点击了文件上传')
var data = new FormData();
data.append("file",this.file)
data.append("参数1",1)
data.append("参数二",0)
console.log(data)
let headers = {headers: {"Content-Type": "multipart/form-data"}}
$http.post('这里填后端给的api接口',data,headers)
.then(res => {
console.log('上传成功',res)
})
.catch(err => {
console.log('上传失败',err)
})
}
}
}
</script>