Vue实现文件上传和文件下载

Vue实现文件上传和文件下载

文件下载：

文件下载一般分为几类情况：

1、后台返回一个接口，直接是下载地址

一般直接拼接后台返回的接口即可

window.open(`${process.env.BASE_API}${requestPath.file}/download/${tag}`)

${process.env.BASE_API}：指项目中设置的访问地址

${requestPath.file}/download/${tag}：指接口路径及传入的参数

2、location.href

直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载

window.location.href = urls; // 本窗口打开下载

window.open(urls, '_blank'); // 新开窗口下载

3、HTML5 a.download结合blob对象进行下载

标签的download是HTML5标准新增的属性，作用是指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。

这种是定义的接口不是下载文件的路径，而是通过API可以获得文件的内容，由前端把内容写入到文件中，这种方法是通过获取文件信息，在网页上利用click事件，创建一个文件，然后将文件信息写入到文件中，然后保存

downClick(content,filename){
    //传入需要下载的文本或文件
    this.content = content
    this.filename = filename
    const blob = new Blob([this.content])
    if (window.navigator.msSaveOrOpenBlob) {
        // 兼容IE10
        navigator.msSaveBlob(blob, this.filename)
    } else {
        //  chrome/firefox
        let aTag = document.createElement('a')
        aTag.download = this.filename
        aTag.href = URL.createObjectURL(blob)
        aTag.click()
        URL.revokeObjectURL(aTag.href)
    }
}

4、form提交直接下载

不需要我们处理返回二进制流直接下载，非常方便

form 的 action 设置为接口地址，method 设置为post ，Post 到后台的数据设置为input 的属性 name = key，value = value的形式，如果有多个key、value的值要传递，那么就设置多个input来分别储存单个的key、value；

如果请求的接口可以不需要参数，那么input还是必须要一个，如果不要得话 会引起接口报错

原理：form的action相当于一个浏览器本页签/页面的一个请求，不会被后台，前台的路由拦截。所以能够提交成功。

注意点：如果设置method为get，在action中的url添加了参数的话，想用这个参数替代input的key、value形式来提交到后台，这参数是没有效果的，后台拿不到这些参数，真正的参数还是以input的name、value的形式储存，在submit方法执行后传递到后台。

这样我们就是实现了文件下载，但是表单提交的数据一般是简单的键值对，如果传参比较复杂可以考虑将表单序列化提交。

因为项目是基于vue的，而且提交的请求参数涉及很多参数，比较复杂，所以采用了方法三来实现

axios.post('/rest/inventory/oh_status/info/excel', {
    site: this.selectedsite,
    bu: this.selectedbu,
    ohHealthStatus: this.selectedtitle,
    ohHealthRootcause: this.selectedblock,
    search: this.search,
    sort: this.sort
}, {responseType: 'arraybuffer'}).then(this.ExportFile).catch(function (error) {
    console.log(error)
})

this.content = content
this.filename = filename
const blob = new Blob([this.content])
if (window.navigator.msSaveOrOpenBlob) {
    // 兼容IE10
    navigator.msSaveBlob(blob, this.filename)
} else {
    //  chrome/firefox
    let aTag = document.createElement('a')
    aTag.download = this.filename
    aTag.href = URL.createObjectURL(blob)
    aTag.click()
    URL.revokeObjectURL(aTag.href)
}

注意我们发送请求的时候一定要写上responseType，{responseType: ‘arraybuffer’} 否则下载下来的文件打不开！！！

文件上传

文件上传通常使用form表单，但是有时候我们不想要用表单，ES6的fromData来实现

handleGetFile (data) {
  this.file = data
  let formdata = new FormData()
  formdata.append('file', this.file)
  formdata.append('submit', false)
  let config = {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
  axios.post('/rest/master_data/ct2r/odin_delivery_metrics/cvc/file_upload_review', formdata, config).then(this.sendFileSucc)
},

首先 我们获取完文件之后，创建FormData对象，配置头部，发送该请求就OK了，别忘了让后台将接收头部请求改为formdata的格式