vue+axios通过formdata提交参数和上传文件

import axios from 'axios';
import property from './property'; //引用基础配置文件
import util from './util'; //引用刚才我们创建的util.js文件，并使用getCookie方法
import qs from 'qs';
import Cookies from 'js-cookie';
// axios 配置
axios.defaults.timeout = 30000;
axios.defaults.baseURL = util.api; //这是调用数据接口
axios.defaults.withCredentials = true;
axios.defaults.headers = {
  'Content-Type': 'application/json' //设置跨域头部
};

// http request 拦截器，通过这个，我们就可以把Cookie传到后台
axios.interceptors.request.use(
    config => {
      const token = Cookies.get('user'); //获取Cookie
      if (token) {
        config.headers.token = token;
       // config.params = {'token': token}; //后台接收的参数，后面我们将说明后台如何接收
        /**
         * 原axios封装的时候对所有的请求请求 进行 JSON 转换，会破坏掉 formdata 提交数据，
         * 所以可以通过axios.create() 创建一个新的实例(axiosInstanceNew)进行 formdata提交,见下
         */
        config.data = JSON.stringify(config.data); 
        //将get请求的参数进行序列化，主要处理数组传值问题
        config.paramsSerializer = function(params) {
            return qs.stringify(params, {indices: false});   
          }
      } else {
        if (!util.oneOf(config.url, property.noTokenUrl)) {
          location.reload();
        }
      }
      return config;
    },
    err => {
      return Promise.reject(err);
    }
);

// http response 拦截器
axios.interceptors.response.use(
    response => {
//response.data.errCode是我接口返回的值，如果值为2，说明Cookie丢失，然后跳转到登录页，这里根据大家自己的情况来设定
      // if(response.data.errCode == 2) {
      // router.push({
      // path: '/login',
      // query: {redirect: router.currentRoute.fullPath}  //从哪个页面跳转
      // })
      // }
      return response;
    },
    error => {
      switch (error.response.status) {
        case 401:
          Cookies.remove('user');
          if (!util.oneOf(error.config.url.substring(util.api.length), property.noTokenUrl)) {
            location.reload();
          }
          break;
        // case 404:
        //
        //   break;
        // case 500:
        //
        //   break;
        default:
            alert(`请求出错！请求状态码：${error.response.status}。`);
      }
      return error;
      // if(error.response.status == 401){
      //     //this.$Message.error('32131');
      //     //util.delCookie('user');
      //    Cookies.remove('user')
      //     location.reload();
      // }else{
      //     alert("请求出错!");
      // }
      //return Promise.reject(error.response.data)
    });

export default axios;
// -------------------------------
//创建新的axios
//创建一个新的axios实例
const axiosInstanceNew = axios.create({
    baseURL: util.api,
    timeout: 30000,
    withCredentials: true
});

//新axios实例拦截
// http request 拦截器，通过这个，我们就可以把Cookie传到后台
axiosInstanceNew.interceptors.request.use( config => {
        const token = Cookies.get('user'); //获取Cookie
        if (token) {
            config.headers.token = token;
            //将get请求的参数进行序列化，主要处理数组传值问题
            config.paramsSerializer = function(params) {
                return qs.stringify(params, {indices: false});
            }
        } else {
            if (!util.oneOf(config.url, property.noTokenUrl)) {
                location.reload();
            }
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);

// 新 http response 拦截器
axiosInstanceNew.interceptors.response.use( response => {
//response.data.errCode是我接口返回的值，如果值为2，说明Cookie丢失，然后跳转到登录页，这里根据大家自己的情况来设定
        // if(response.data.errCode == 2) {
        // router.push({
        // path: '/login',
        // query: {redirect: router.currentRoute.fullPath}  //从哪个页面跳转
        // })
        // }
        return response;
    }, error => {
        switch (error.response.status) {
            case 401:
                Cookies.remove('user');
                if (!util.oneOf(error.config.url.substring(util.api.length), property.noTokenUrl)) {
                    location.reload();
                }
                break;
            // case 404:
            //
            //   break;
            // case 500:
            //
            //   break;
            default:
                alert(`请求出错！请求状态码：${error.response.status}。`);
        }
        return error;
        // if(error.response.status == 401){
        //     //this.$Message.error('32131');
        //     //util.delCookie('user');
        //    Cookies.remove('user')
        //     location.reload();
        // }else{
        //     alert("请求出错!");
        // }
        //return Promise.reject(error.response.data)
    });


/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post (url, data = {}) {
  axios.defaults.withCredentials = true;
  return new Promise((resolve, reject) => {
    axios.post(url, data)
        .then(response => {

          resolve(response.data);
        }, err => {

          reject(err);
        });
  });
}
/**
 * post 请求方法  提交格式为 formdata
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post_formData (url, data = {}) {

    // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
    //创建一个FormData对象，然后通过append() 方法向对象中添加键值对
    // let formData = new window.FormData();
    let formData = new FormData(); //这里是 .js文件
    for ( let key in data ){
        formData.append( key, data[key]);
    }

    const options = {
        method: 'POST',
        // headers: { 'content-type': 'application/x-www-form-urlencoded' },
        headers: { 'Content-type': 'multipart/form-data' },
        // data: qs.stringify(data),
        data: formData,
        url,
    };
    return axiosInstanceNew(options);
}