element的上传附件怎么设置只有图片才能点击打开其他格式都是下载
时间: 2023-12-22 12:02:45 浏览: 55
要设置只有图片可以点击打开,而其他格式都只能下载,可以使用element-ui中的el-upload组件的before-upload钩子函数进行判断和处理。具体实现步骤如下:
1. 在el-upload组件中加入before-upload属性:
```html
<el-upload
class="upload-demo"
action="/upload"
:before-upload="beforeUpload">
<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">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
2. 在methods中定义beforeUpload方法:
```javascript
beforeUpload(file) {
const isImage = file.type.startsWith('image/');
if (!isImage) {
this.$message.error('只能上传图片文件!');
}
// 返回false,取消上传
return isImage;
}
```
在beforeUpload方法中,首先判断文件类型是否为图片,如果不是,就弹出错误提示信息并返回false,取消上传。如果是图片,就返回true,继续上传。
这样设置后,用户上传非图片格式的文件时,会收到错误提示并取消上传,而上传图片则会正常上传。