el-plus el-upload 限制只能上传图片类型
时间: 2025-02-15 14:13:45 浏览: 93
### 如何配置 `el-upload` 组件以确保仅限上传图片文件
为了确保 `el-upload` 组件只接受图片文件,可以通过设置 `accept` 属性来限定可选文件的类型。此属性接收一个字符串参数,该参数定义了 `<input>` 元素的 accept 属性值[^1]。
另外,在实际应用中,通常还会结合 `before-upload` 钩子函数进一步验证文件类型,从而提供更灵活和可靠的控制机制。如果发现不是图片类型的文件,则可以在钩子内阻止上传过程并给出提示信息[^2]。
下面是一个具体的实现例子:
```vue
<template>
<div>
<!-- 使用 :auto-upload="false" 来手动控制上传 -->
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:limit="1"
:file-list="fileList">
<button type="primary">点击上传</button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script setup>
import { ref } from 'vue';
const fileList = ref([]);
function handlePreview(file) {
console.log('preview', file);
}
function handleRemove(file, fileList) {
console.log('remove', file, fileList);
}
// 进一步校验文件类型以及大小
function beforeAvatarUpload(file) {
const isJPGorPNG = (file.type === 'image/jpeg' || file.type === 'image/png');
const isLt500K = file.size / 1024 < 500;
if (!isJPGorPNG) {
ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!');
}
if (!isLt500K) {
ElMessage.error('上传头像图片大小不能超过 500KB!');
}
return isJPGorPNG && isLt500K;
}
</script>
```
在这个示例里,除了设置了 `accept=".jpg,.png"` 外,还利用了 `before-upload` 方法来进行额外检查,保证只有符合条件的图片才能被成功上传[^3]。
阅读全文
相关推荐


















