VUE-axios用new FormData()上传文件

因为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);             
        })  
      }
    }
    
  }
}









暧昧贴

发表评论

    微笑 大笑 拽 大哭 奸笑 流汗 喷血 生气 囧 不爽 晕 示爱 卖萌 吃惊 迷离 爱你 吓死了 呵呵