elementui上传文件只接受pdf文件
时间: 2023-09-18 22:06:44 浏览: 90
如果你想让 Element UI 的上传组件只接受 PDF 文件,可以像下面这样设置 `accept` 属性:
```html
<el-upload
class="upload-demo"
drag
action="/upload"
:accept="'.pdf'"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传 PDF 文件,且不超过 10MB</div>
</el-upload>
```
注意:在这里,我们使用了不带 `.` 的 PDF 文件扩展名 `pdf`。如果你只想接受某个特定的 MIME 类型的 PDF 文件,可以使用该 MIME 类型,例如 `application/pdf`。同时,你还可以通过设置 `before-upload` 属性来限制上传文件的大小,例如:
```js
beforeUpload(file) {
const isPDF = file.type === 'application/pdf'
const isLt10M = file.size / 1024 / 1024 < 10
if (!isPDF) {
this.$message.error('只能上传 PDF 文件')
}
if (!isLt10M) {
this.$message.error('上传文件大小不能超过 10MB')
}
return isPDF && isLt10M
}
```
这里,我们在 `beforeUpload` 函数中检查上传文件的类型和大小,如果不符合要求,就弹出一个错误提示,并返回 `false`。只有当文件符合要求时,才会继续执行上传操作。
阅读全文