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对象,释放内存。

Logo

前往低代码交流专区

更多推荐