谢一一

因为axios请求拦截器的存在，直接用axios的POST请求是会被拦截掉，数据会处理掉一些。而我们用new FormData()传输文件是不需要做任何处理的。所以就只能饶过axios的拦截。



在全局main.js里用axios.create创建实例

//main.js

import axios from 'axios'
import VueAxios from 'vue-axios'

var ajax = axios.create({
  baseURL: 'http://localhost:8082',
  timeout: 2000,
  headers: {'Content-Type': 'multipart/form-data'}
});

Vue.prototype.ajax = ajax

input文件上传这里先用@change事件获取文件

<input type="file"  accept=".xls,.xlsx"  @change="inputFileChange"> 

然后按钮点击事件拿到e.target.files[0]

export default{
  data () {
    return {        
      files : ''
    }
  },
  methods : {

    inputFileChange (e){
        // input的@change事件拿到数据        
      this.files = e.target.files[0]
    }
    clicks () {   
      // 上传按钮点击事件
      if(this.files){
        // 把文件放入FormData
        let fd  = new FormData();
        fd.append("file", this.files);

        this.ajax.post('upfile.php',fd).then((res) => {
          console.log(res);             
        })  
      }
    }

  }
}