el-upload控制上传的文件类型
时间: 2023-07-18 10:41:37 浏览: 50
可以通过设置 el-upload 控件的 accept 属性来限制上传的文件类型。例如,如果只允许上传图片文件,可以设置 accept 属性为 "image/*",如下所示:
```
<el-upload
class="upload-demo"
action="/upload"
:accept="'image/*'"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
其中,accept 属性的值为 MIME 类型或文件扩展名,可以使用通配符表示多种类型。在上面的例子中,"image/*" 表示所有图片类型,包括 jpg、png 等。如果需要限制多个类型,可以使用逗号分隔,如 "image/jpeg,image/png"。如果不希望限制文件类型,可以将 accept 属性设置为空字符串。
相关问题
el-upload 控制上传文件类型
el-upload 组件可以通过设置 accept 属性来控制上传文件类型,例如:
```html
<el-upload
action="/upload"
accept=".jpg,.jpeg,.png"
:on-success="handleSuccess"
>
<el-button slot="trigger">上传文件</el-button>
</el-upload>
```
上面的代码中,accept 属性设置为 ".jpg,.jpeg,.png",表示只允许上传这三种类型的文件。如果上传其他类型的文件,会提示用户选择正确的文件类型。
element-plus el-upload 控制上传文件类型
要控制上传文件类型,可以使用el-upload的file-list属性,它是一个数组,用于存储已上传的文件列表。通过监听before-upload事件,可以在上传之前对文件进行检查和筛选。
示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:file-list="fileList"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFiles">上传到服务器</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
beforeUpload(file) {
// 判断文件类型是否符合要求
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJpgOrPng) {
this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
return false;
}
// 添加到fileList中
this.fileList.push(file);
return false;
},
onSuccess() {
this.$message.success('上传成功');
},
onError() {
this.$message.error('上传失败');
},
uploadFiles() {
// 执行上传操作
this.$refs.upload.submit();
}
}
};
</script>
```
在before-upload事件中,我们检查了文件类型和大小,如果符合要求,则将文件添加到fileList中。在上传之前,我们可以通过遍历fileList来控制上传的文件类型。
另外,我们将auto-upload属性设置为false,这样选择文件后不会自动上传,而是需要手动调用submit方法上传文件。