文件上传 限制文件大小
时间: 2023-09-23 12:05:27 浏览: 63
在 Element UI 的 Upload 组件中,你可以通过设置 `before-upload` 方法来限制文件的大小。下面是一个示例代码,演示如何限制文件的最大大小为 5MB:
```vue
<template>
<div>
<el-upload
action="/your-upload-url"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
>
<el-button type="primary">点击上传文件</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [], // 用于存储已上传的文件
};
},
methods: {
handleUploadSuccess(response, file) {
// 上传成功的回调函数
this.fileList.push(file); // 将上传成功的文件添加到 fileList 中
// 在这里可以进行其他操作,如保存文件信息到数据库等
},
beforeUpload(file) {
// 上传之前的钩子函数,可以在这里进行一些文件大小等的校验
const isLt5M = file.size / 1024 / 1024 < 5; // 将文件大小转换为MB,并判断是否小于5MB
if (!isLt5M) {
this.$message.error('文件大小不能超过5MB');
return false;
}
return true;
},
},
};
</script>
```
在上面的代码中,我们使用了 Element UI 的 Upload 组件,并配置了相应的属性和方法。其中,`before-upload` 方法用于进行上传之前的校验。我们通过计算文件大小并将其转换为MB的方式来判断文件大小是否符合要求。如果文件大小超过了限制,将会显示错误提示信息,并阻止文件的上传。
你可以根据自己的需求修改文件大小的限制值和错误提示信息。请注意,前端的文件大小限制只是一种辅助校验,真正的文件大小限制应该在后端进行。因此,在实际应用中,你还需要在后端对上传的文件进行大小的验证。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)