vue中实现文件上传,本文使用axios实现文件的上传操作,使用的是post方法
首先是html<template><input type="file" name="fileUpload" id = "input_updata" @change="change($event)" ref="inputFile" ><input type="submit" value="提交" id = "btn_u...
·
话不多说,直接贴代码
<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: {
// 触发时,将选择的上传文件复制给file,用于提交操作使用
change(event){
console.log('文件上传',event.target.files[0])
this.file = event.target.files[0]
},
// 文件上传
// 原理是通过from表单
updata(){
console.log('点击了文件上传')
var data = new FormData();//重点在这里 如果使用 var data = {}; data.inputfile=... 这样的方式不能正常上传
// 将需要添加的参数添加进表单中
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>
更多推荐
已为社区贡献1条内容
所有评论(0)