el-upload附件点击下载
时间: 2023-11-03 18:03:22 浏览: 256
el-upload附件点击下载的功能实现是通过给上传组件的文件列表绑定点击事件来实现的。具体步骤如下:
1. 首先,给el-upload组件绑定一个ref属性,方便在代码中获取到该组件实例。
2. 在上传成功的回调函数中,获取到上传的文件列表,并为每个文件添加一个点击事件。
3. 点击事件中,通过文件的url或者其他标识符,可以将文件下载链接拼接出来,然后通过window.open或者创建a标签的方式实现文件下载。
下面是一个示例代码,可以在el-upload上传成功的回调函数中实现附件点击下载的功能:
```javascript
<template>
<el-upload
ref="upload"
action="/upload"
:on-success="handleSuccess"
:file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后,给每个文件添加点击事件
fileList.forEach(file => {
file.onClick = () => {
// 拼接文件下载链接
const downloadUrl = `/download?url=${file.url}`;
// 打开新窗口下载文件
window.open(downloadUrl);
};
});
this.fileList = fileList;
}
}
};
</script>
```
阅读全文