Vue上传下载文件的方法

一，下载文件

1，接收后端传的流文件。

// 下载模板get请求
    async download () {
      const res = await this.$http.get(URL, { responseType: 'blob' }) 
      this.downloads(res.data)
    },
    downloads (data) {
      if (!data) {
        this.$message.error('下载失败')
        return
      }
      const url = window.URL.createObjectURL(new Blob([data]))
      const aLink = document.createElement('a')
      aLink.style.display = 'none'
      aLink.href = url
      aLink.setAttribute('download', '模板.xlsx')
      document.body.appendChild(aLink)
      aLink.click()
      document.body.removeChild(aLink)
      window.URL.revokeObjectURL(url)
    }


// 下载模板post请求
    async download () {
      const res = await this.$http.post(URL, {}, { responseType: 'blob' })
      console.log(res)
      this.downloads(res.data)
    },
    downloads (data) {
      if (!data) {
        this.$message.error('下载失败')
        return
      }
      const url = window.URL.createObjectURL(new Blob([data]))
      const aLink = document.createElement('a')
      aLink.style.display = 'none'
      aLink.href = url
      aLink.setAttribute('download', '模板.xlsx')
      document.body.appendChild(aLink)
      aLink.click()
      document.body.removeChild(aLink)
      window.URL.revokeObjectURL(url)
    }

　　这里需要注意的是，在用post请求的三个参数分别是请求URL，请求体，第三个参数才能设置返回响应数据的类型，而get请求直接在请求URL后面加上返回响应数据的类型即可。

2，使用js-file-downliad

安装

npm install js-file-download --save

　　

使用

import fileDownload from 'js-file-download'

this,$http.post(URL,{}, {responseType: 'blob'}).then(res => {
    fileDownload(res.data, '模板.xls')
})

　　

2，通过URL下载

后端提供文件的地址，直接使用浏览器下载

window.location.href = 文件路径

　　

二，上传文件

使用element UI的el-upload组件

<el-upload
     action=" "
     :before-upload = beforeUpload
      :http-request = httprequest
      :show-file-list = 'false'>
      <el-button type="primary">导入</el-button>
      <div slot="tip">只能上传xls/xlsx文件</div>
</el-upload>

  

// 上传文件
    beforeUpload (file) {
        var FileExt = file.name.replace(/.+\./, '')
        if (['xls', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
            this.$message({
                type: 'warning',
                message: '请上传后缀为xls/xlsx的文件'
            })
            return false
        }
    },
    async httprequest (param) {
        this.loading = true
        var filelist = new FormData()
        filelist.append('file', param.file)
        const res = await this.$http.post(URL, filelist, { headers: { 'Content-Type': 'multipart/form-data' } })
        console.log(res)
        if (res.data.succeed) {
            this.getualist()
            return this.$message.success('上传成功！')
        } else {
          this.getualist()
          return this.$message.error(res.msg)
        }
    }