zoukankan      html  css  js  c++  java
  • vue-axios配置token,上传图片

    vue1.0用 vue-resource 目前不维护了

    vue2.0用 axios

    使用

    1.安装axios,

    npm install axios
    

    2.在main.js中配置

    import axios from 'axios'
    Vue.prototype.$http = axios;  
    

    3.配置main,js中token,每次请求都会自带token

    var token = '你自己定义的token'
    
    axios.interceptors.request.use(
      config => {
        config.headers['后端接收token的字段'] = token
        return config
      },
      err => {
        return Promise.reject(err)
      })
    

    4.上传图片

    4.1 html部分代码

     <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
    

    4.2 script部分

          update(e){
            let file = e.target.files[0];
            let param = new FormData(); //创建form对象
            param.append('后端接收图片的字段',file,file.name)
            console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
            this.uploading(param,file.name);
          },
          uploading(param,pathName){
            this.$http.post('接口地址',param)
              .then(response=>{
                console.log(response.data);
                let localArr = this.images.map((val,index,arr)=>{
                  return arr[index].localSrc;
                })
                if(!~localArr.indexOf(pathName)){
                  this.images.push({'src':this.showUrl+response.data.key,'localSrc':pathName});
                }else{
                  alert('已上传该图片');
                }
              })
          },
    

    到这就可以实现图片上传了

  • 相关阅读:
    js瀑布流
    键盘控制物体走
    数组模拟三级联动
    会飞的小鸟小游戏 原生js
    js 广告 网页漂浮
    Vue 选项卡和 js 选项卡
    vue-购物车效果
    vue-温度控制/登录显示/反转
    vue初始
    php array_column 和array_multisort函数实现按某一字段对二维数组进行排序-test
  • 原文地址:https://www.cnblogs.com/jsusu/p/7256022.html
Copyright © 2011-2022 走看看