el-upload文件下载
时间: 2023-06-30 14:20:38 浏览: 100
el-upload 组件本身并不支持文件下载,它只是用于文件上传的组件。如果需要实现文件下载功能,可以通过在页面中添加一个下载按钮,并在点击按钮时发送下载请求来实现。
例如,假设我们已经有一个上传成功后返回的文件下载链接,可以通过下面的代码实现文件下载:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button slot="upload" type="success">上传文件</el-button>
</el-upload>
<el-button type="primary" @click="handleDownload">下载文件</el-button>
</div>
</template>
<script>
export default {
data() {
return {
downloadUrl: '' // 保存上传成功后返回的文件下载链接
}
},
methods: {
handleSuccess(response, file, fileList) {
this.downloadUrl = response.data.downloadUrl; // 保存下载链接
},
handleDownload() {
window.open(this.downloadUrl); // 发送下载请求
}
}
}
</script>
```
在上面的代码中,我们在页面中添加了一个下载按钮,并在点击按钮时发送下载请求。注意,如果需要下载文件,必须在浏览器中打开一个新的窗口或标签页来发送下载请求,否则下载请求可能会被浏览器阻止。
阅读全文