vue2 + ant design vue 1.x 文件的上传与下载实现

文件下载：

现在的文件下载一般是前端发送一个请求，获取到文件的url链接，再根据链接，创建下载链接

        const url = res.body.path
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '标准数据模板.xls') // 指定下载后的文件名，防跳转
        document.body.appendChild(link)
        link.click()

文件上传结合antd的upload组件使用：

beforeUpload (file) {
      this.importLoading = true
      const formData = new FormData()
      formData.append('file', file)
      importFromTpl(formData).then(() => {
        this.$message.success('导入成功')
        this.refreshCurrentPage()
      }).finally(() => {
        this.importLoading = false
      })
      return false
    },

上传的方式有很多，这里采用自定义的上传方式，具体参考antd官方文档

需要注意的是，像这里如果使用beforeUpload，一定要return false 来阻止upload组件的默认上传事件，否则他会以当前网页路径为请求路径去上传数据。

附：

当然还有一种古老的下载方式：发起下载请求后，后端直接返回二进制流

const content = res.data
const blob = new Blob([content])
const fileName = new Date()+'导出文件'
const elink = document.createElement('a')
elink.download = fileName  //命名下载名称
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob) //表示一个指定的file对象或Blob对象
document.body.appendChild(elink)
elink.click()  //点击触发下载
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)