zoukankan      html  css  js  c++  java
  • vue入门(二) 让axios发送表单形式数据

    (一) 使用 axios vue-axios qs

     1.qs是必不可少的插件

    npm install --save axios vue-axios qs

    2.安装完成后,在main.js插入以下代码

    //载入axios
    import Qs from 'qs'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    var axios_instance = axios.create({
    baseURL:'http://localhost', //自行修改url
    transformRequest: [function (data) {
    data = Qs.stringify(data);
    return data;
    }],
    headers:{'Content-Type':'application/x-www-form-urlencoded'}
    })
    Vue.use(VueAxios, axios_instance)

    3.在vue模块中可以这样使用

    this.$http.post('url', {
    id:1
    }).then(response => {
    console.log(response)
    }).catch( error => {
    console.log(error);
    });

    (二)

    1.安装axios

    npm install axios  --save 
     
    2.在main.js插入以下代码
    import axios from 'axios'
     
    axios.defaults.baseURL = 'http://localhost:xxx/api/'; 
    Vue.prototype.$http = axios;
     
    3. axios 在组件中使用
     不带参数:
    this.$http.post('TableList/TableLoad').then(response => {
     
    }, response => {
     
    })
      formData形式上传数据:
      let fd = new FormData();
      fd.append('file', file);//这里上传的是一个图片文件,以base64传递
      this.$http.post('fileupload/FileUpLoad',fd,{
        headers:{
        'Content-Type':'multipart/form-data'   //hearder 很重要,Content-Type 要写对
        }
      }).then(response => {
     
      }
      }, response => {
     
      })
  • 相关阅读:
    IP路由选择过程
    Netstat命令详解
    路由器的硬件结构
    路由器发展编年史 完结篇
    制作自己博客园文章签名
    路由器发展编年史 发展篇
    距离矢量路由协议_(4)
    路由器的基本功能
    分组交换、报文交换、电路交换
    动态路由中的几种常见metric
  • 原文地址:https://www.cnblogs.com/zhuzy/p/7991770.html
Copyright © 2011-2022 走看看