vue记录 之代理以及axios

1、http.js里面拦截

    postt(url,params,headers) {
        return new Promise((resolve, reject) => {
            axios({
                url,
                data: params,
                headers:headers,
                method: 'POST'
            }).then(res => {
                resolve(res.data)
                return res.data
            }).catch(error => {
                reject(error)
            })
           
        })
    }

2、vue.cong,js里面填写代理的信息

//解决验证码
module.exports = {
  configureWebpack:{
    devServer:{
      port:8085,//端口号
      proxy:{
        '/x':{
          target:'http://x/',
           changeOrigin:true,
           ws:true,
           pathRewrite:{
             '^/':''
           }
        },
        '/x':{
          target:'http://x/',
          changeOrigin:true,
          ws:true,
          pathRewrite:{
            '^/':''
          }
       },
      }
    }
  }
}

3、记录图片文件流问题

   getImage(url,params,headers) {
        return new Promise((resolve, reject) => {
            axios({
                url,
                data: params,
                headers:headers,
                responseType: 'blob',
                method: 'POST'
            }).then(res => {
                resolve(res)
                return res
            }).catch(error => {
                reject(error)
            })
       
        })
    },



//验证码
api.gex=function(params,headers){
    let dataUrl = `x?t=${new Date().valueOf()}`;
    return http.getImage(dataUrl,params,headers)
}

//图片内容
 that.$api.getVerifyCode([],headers).then((res) => {
        that.captchaUrl = window.URL.createObjectURL(res.data)
  })

4、记录附件下载问题

     getFiles(url, params,types) {
        return new Promise((resolve, reject) => {
            _axios({
                url,
                data: params,
                responseType:types,
                method: 'POST'
            }).then(res => {
                resolve(res)
                return res
            }).catch(error => {
                reject(error)
            })
        })
    },

//下载数据
api.getFilesDownload=function(res,filename) {
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(new Blob([res]), filename);
      } else {
        // 非IE 浏览器
        let blob = new Blob([res], { type: 'application/octet-stream' })
            


            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")

            link.style.display = "none"
            link.href = url

            // download 属性定义了下载链接的地址而不是跳转路径
            link.setAttribute("download", filename)
            document.body.appendChild(link)

            link.click()

            window.URL.revokeObjectURL(link.href) //释放url
            document.body.removeChild(link)//释放标签
      }
}

使用
 that.$api.getFiles(params,'Blob').then((res) => {
            if (res.code==500) {
                showMessage(res)
                return
            } else {
                that.$api.getFilesDownload(res,'信息.xlsx');
            }
        });

5、记录uplaod自定义上传

     <el-upload class="upload-demo" :http-request="upFile" action=""
                :show-file-list="false"  :auto-upload='true' :file-list="fileList">
                <el-button size="small" type="primary">上传本地文件</el-button>
              </el-upload>

    upFile(file, fileList){
      
      let that=this;
      
      let parms=new FormData();
      parms.append('file',file.file);
      that.$api.upFile(parms).then((res) => {
        if (res.code === 200) {
              this.fileList=[];
            this.fileList.push(file.file);
          
        } else {
              that.$message.error(res.msg);

        }
      });

    },