axios 上传文件_Vue-Axios请求配置三种+上传+下载

/** 
 * 请求get方法
 * */ 
export function get(url, params){    
 return new Promise((resolve, reject) =>{        
        axios.get(url+params)        
        .then(res => {            
 resolve(res.data);        
        })        
        .catch(err => {            
 reject(err.data)    
 // console.log(err.data)    
        })    
    });
}

/**
 * 请求post方法
 */

export function post(url, params) {    
 return new Promise((resolve, reject) => {         
        axios.post(url, params)        
        .then(res => {            
 resolve(res.data);        
        })        
        .catch(err => {            
 reject(err.data)        
        })    
    });
}

/**
 * 请求form-data方法
 */
export function postFormData(url, params) {    
 return new Promise((resolve, reject) => {      
        axios.post(url, params,{headers: {
 'Content-Type': 'multipart/form-data'
            } })       
        .then(res => {            
 resolve(res.data);        
        })        
        .catch(err => {            
 reject(err.data)        
        })    
    });
}

/**
 * vue 上传组件 
 */
              <el-upload
                class="avatar-uploader"                               
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-change="imgPreview"
                :auto-upload="false"
                ><img width="100%" v-if="headImg" :src="headImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

        imgPreview(file,fileList){
          let fileName = file.name;
          let regex = /(.jpg|.gif|.png)$/;
          if (regex.test(fileName.toLowerCase())) {
              this.headImg = URL.createObjectURL(file.raw);  //获取路径
              this.file = file.raw   // 重点1:将文件对象赋值给file
              // console.log(this.form.headImg);
          } else {
              this.$message.error('请选择图片文件');
          }
        },
/**
 * formData的使用: 创建对象,添加对象属性
 */
let formdata = new FormData()
    formdata.append(file,this.file)   // 重点2:将文件对象追加到formdata中    
                                     //前面是属性名,后面是文件对象
this.postFormData(url,formdata)     //重点3: 上传到服务器

/**
 * 下载
 */
import axios from 'axios';
import { Notification } from 'element-ui';

//定义导出统一的方法
export function exportMethod(data) {
    axios({
        method: data.method,
        url: `${data.url}${data.params ? '?' + data.params : ''}`,
        responseType: 'blob'
    }).then((res) => {
        const link = document.createElement('a')
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
 
        link.download = data.fileName //下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }).catch(error => {
        
        Notification({
            title: '提示',
            message: '导出失败',
            type: 'warning'
        })
        console.log(error)
    })
}

//组件中引用
import { exportMethod } from '@/utils/request'

exports(){
      //根据条件导出内容
      var query =  this.$route.query
      let myObj = {
        method: 'get',
        url: 'statistics/exportAddressMore',
        fileName: '物资接收场线排行',
        params: `statistics/exportAddressMore?
                organizeId=${query.organizeId}
                &farmId=${query.farmId}
                &beginTime=${query.beginTime}
                &endTime=${query.endTime}`
      }
      exportMethod(myObj)
    }