Vue实现文件的上传与下载

项目需求： 前端页面需要导出Excel文件，传入过多的参数给后端，get地址栏不行，只能接受post方式去导出数据

1、get的下载方式

 let url =  xxxx.action?a=xx&b=yy;
 window.location.href = url;
 // 或者
 window.open(url, '_self')

弊端：当请求参数较多时，get的方式无法使用，这时候需要考虑post的方式，但是直接通过ajax的post的方式无法调用浏览器的下载功能

2、post的下载方式

原理： 创建一个隐藏form表单，通过form表单的提交刷新功能，实现下载。

代码如下：

export default {
  methods: {
    // 导出excel
    postExcelFile (params, url) {
      // params是post请求需要的参数，url是请求url地址
      var form = document.createElement('form')
      form.style.display = 'none'
      form.action = url
      form.method = 'post'
      document.body.appendChild(form)
      // 动态创建input并给value赋值
      for (var key in params) {
        var input = document.createElement('input')
        input.type = 'hidden'
        input.name = key
        input.value = params[key]
        form.appendChild(input)
      }

      form.submit()
      form.remove()
    }
  }
}

需要注意的是，这种方式的enctype默认为form-data的形式，而不是application/json的格式，因此后端的接口也应该要参数格式一致。

正常情况下，可以修改enctype的值，参考文章：

https://www.cnblogs.com/mmzuo-798/p/11634055.html