1. 首先,使用点击文件列表中的文件的钩子: on-preview
<div class="edit-dialog-document">
<el-form-item label="支撑材料">
<el-upload
:accept="fileType"
class="upload-demo"
action="/api/common/upload"
multiple
:file-list="form.fileList"
:on-remove = 'upRemove'
:on-success="upSuccess"
:on-error="upError"
:on-preview = 'openFile'
>
<el-button type="primary">点击上传</el-button>
<template #tip>
<div class="el-upload__tip">材料上传</div>
</template>
</el-upload>
</el-form-item>
</div>
2. 获取点击到的文件的信息:
openFile(e){ // 点击上传的文件列表的文件的操作
console.log(e, "点击上传的文件列表的文件的操作");
// window.open(e.url);
var a = document.createElement("a");
console.log(a, "创建a");
var event = new MouseEvent("click");
a.target = "_blank";
a.download = e.name;
a.href = e.url;//路径前拼上前缀,完整路径
a.dispatchEvent(event);
},
上面打印的e的信息为:
3. 在这个点击事件中,我们创建一个a标签,注册一个鼠标点击事件给这个a 标签。
4. 这样我们就完成了,点击文件的下载功能,(注意:当前的地址和文件地址要处于同源网络,否则,不会下载该文件,而只是打开该文件)
dispatchEvent事件触发器:事件触发器-----dispatchEvent - MRnightt - 博客园