element的上传附件什么格式都可以上传,但点击打开只有图片格式才能点击打开其他格式点击都只能下载
时间: 2023-12-11 08:04:18 浏览: 61
要实现这个功能,可以在el-upload组件中加入一个自定义的slot,用来显示上传的文件列表。然后在这个slot中根据文件类型来决定是否显示打开按钮,具体实现步骤如下:
1. 在el-upload组件中加入一个自定义的slot,用来显示上传的文件列表:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button
style="margin-left: 10px;"
type="success"
:disabled="!Boolean(fileList.length)">
开始上传
</el-button>
<div slot="tip" class="el-upload__tip">上传文件格式不限</div>
<template slot-scope="{ file }">
<div class="file-item">
<span class="file-name">{{ file.name }}</span>
<span class="file-actions">
<a v-if="isImage(file)" :href="file.url" target="_blank">打开</a>
<a v-else :href="file.url" download>下载</a>
<i class="el-icon-delete" @click="handleRemove(file)"></i>
</span>
</div>
</template>
</el-upload>
```
这里通过slot-scope来获取上传的文件列表(fileList),然后在自定义的slot中遍历文件列表,显示每个文件的名称和操作按钮。
2. 在methods中定义isImage方法,用来判断文件类型是否为图片:
```javascript
isImage(file) {
return file.type.startsWith('image/');
}
```
如果文件类型是以'image/'开头的,就认为是图片格式,返回true,否则返回false。
这样设置后,用户上传任何格式的文件都可以,但只有图片格式的文件才会显示打开按钮,其他格式的文件只能下载。