elementui上传pdf文件代码怎么写
时间: 2024-03-09 12:45:43 浏览: 62
上传文件的代码
你可以使用 ElementUI 中的 `<el-upload>` 组件来实现上传 PDF 文件的功能。下面是一个简单的示例代码:
```vue
<template>
<el-upload
class="upload-demo"
action="/your-upload-url"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
:limit="1"
:accept="'application/pdf'">
<el-button size="small" type="primary">上传PDF文件</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [],
};
},
methods: {
handleSuccess(response, file, fileList) {
// 上传成功的回调函数
},
beforeUpload(file) {
// 上传之前的校验函数
const isPDF = file.type === 'application/pdf';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isPDF) {
this.$message.error('上传文件只能是 PDF 格式!');
}
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB!');
}
return isPDF && isLt2M;
},
},
};
</script>
```
在上面的代码中,`<el-upload>` 组件的 `action` 属性指定了上传文件的 URL,`before-upload` 属性指定了上传之前的校验函数,`accept` 属性指定了只能上传 PDF 格式的文件。`handleSuccess` 方法则是上传成功的回调函数,你可以在这个方法中处理上传成功后的逻辑。
阅读全文