话不多说,直接贴代码

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐