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的格式