Vue el-upload实现下载已上传的文件
element-ui的el-upload组件,可以实现文件上传。如果想要通过点击上传的文件,实现下载操作,可以通过组件的on-preview属性实现:<template><el-upload ref="upload" action="" :on-preview="handlePreview" :auto-upload="false"><el-button slot="
·
element-ui的el-upload组件,可以实现文件上传。
如果想要通过点击上传的文件,实现下载操作,可以通过组件的on-preview属性实现:
<template>
<el-upload ref="upload" action="" :on-preview="handlePreview" :auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
submitUpload() {
this.$refs.upload.submit()
},
handlePreview(file) {
console.log(file)
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(file.raw, file.name)
} else {
var link = document.createElement('a')
link.download = file.name
link.href = window.URL.createObjectURL(file.raw)
link.click()
window.URL.revokeObjectURL(link.href)
}
}
}
}
</script>
on-preview会监听文件列表的点击事件,点击时会传入一个file参数,file参数的raw属性是一个File类型的对象,File对象建立在Blob对象基础上,继承了Blob的属性和方法。
因此针对Blob实现的下载操作可以同样应用在File上,通过window.URL.createObjectURL()可以获取下载的URL,绑定在a标签上后,再通过程序自动触发a标签的点击事件即可实现下载。最后使用完之后,通过revokeObjectURL释放URL对象,释放内存。
更多推荐
已为社区贡献1条内容
所有评论(0)