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('已上传该图片');
                }
              })
          },
    

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

  • 相关阅读:
    PHP入门03 -- 数组与数据结构
    PHP入门02 -- 函数
    PHP入门01 -- 基本语法
    node文章
    Mongodb08
    Mongodb07
    ISO处理jq事件
    map
    Django自定义模板
    JS this指向
  • 原文地址:https://www.cnblogs.com/jsusu/p/7256022.html
Copyright © 2011-2022 走看看