上传文件大小修改

编修php.ini

  • 找到:max_execution_time = 30 ,这个是每个脚本运行的最长时间,单位秒,修改为: max_execution_time = 150
  • 找到:max_input_time = 60,这是每个脚本可以消耗的时间,单位也是秒,修改为: max_input_time = 300
  • 找到:memory_limit = 128M,这个是脚本运行最大消耗的内存,根据你的需求更改数值,这里修改为: memory_limit = 256M
  • 找到:post_max_size = 8M,表单提交最大数据为 8M,此项不是限制上传单个文件的大小,而是针对整个表单的提交数据进行限制的。限制范围包括表单提交的所有内容.例如:发表贴子时,贴子标题,内容,附件等…这里修改为: post_max_size = 20M
  • 找到:upload_max_filesize = 2M ,上载文件的最大许可大小 ,修改为: upload_max_filesize = 10M

转载于:https://my.oschina.net/colin86/blog/546948

### 如何在 Element Plus 中设置或更改上传组件允许的文件大小限制 在 Vue3 和 Element Plus 的开发环境中,`el-upload` 组件提供了多种属性来控制文件上传行为,其中包括文件大小限制的功能。可以通过 `beforeUpload` 钩子函数或者直接使用 `limit` 属性配合验证逻辑来实现对文件大小的限制。 以下是具体实现方式: #### 方法一:通过 `beforeUpload` 实现文件大小限制 `beforeUpload` 是一个钩子函数,在文件上传之前触发。可以在该函数中编写自定义逻辑来检查文件大小是否满足条件。如果不满足,则阻止上传并提示用户。 ```javascript const beforeUpload = (file) => { const maxSize = 2 * 1024 * 1024; // 设置最大文件大小为 2MB if (file.size > maxSize) { ElMessage.error(`文件大小不能超过 2MB`); return false; } return true; }; ``` 将上述函数绑定到 `el-upload` 的 `before-upload` 属性上即可生效[^2]。 --- #### 方法二:结合 `rules` 进行表单校验 如果文件上传位于表单中的某个字段下,还可以利用 `el-form` 的校验规则 (`rules`) 来完成文件大小限制。这种方式更加适合复杂的业务场景。 示例代码如下: ```html <el-form :model="form" :rules="rules" ref="uploadForm"> <el-form-item prop="file"> <el-upload v-model:file-list="form.fileList" action="/upload" :before-upload="beforeUpload" :on-change="(file, fileList) => handleChange(file, fileList)" > <el-button type="primary">点击上传</el-button> </el-upload> </el-form-item> </el-form> ``` 对应的 JavaScript 部分: ```javascript import { reactive, ref } from 'vue'; import { ElMessage } from 'element-plus'; export default { setup() { const form = reactive({ fileList: [], }); const rules = { file: [ { required: true, message: '请上传文件', trigger: ['change', 'blur'], }, ], }; const uploadForm = ref(null); const beforeUpload = (file) => { const maxSize = 2 * 1024 * 1024; // 文件大小限制为 2MB if (file.size > maxSize) { ElMessage.error('文件大小超出限制'); return false; } return true; }; const handleChange = (file, fileList) => { if (fileList.length > 0) { form.fileList = [fileList[fileList.length - 1]]; // 只保留最后一个文件 } }; return { form, rules, uploadForm, beforeUpload, handleChange, }; }, }; ``` 此方法不仅实现了文件大小限制,还能够动态更新文件列表,确保每次仅保留最新上传的一个文件[^3]。 --- #### 方法三:全局配置默认文件大小限制 对于项目中存在大量类似的文件上传需求时,可以考虑封装一个通用的上传组件,并在其内部预设好文件大小限制及其他常用参数。这样可以减少重复代码量,提升维护效率。 示例封装代码片段: ```javascript // UploadComponent.vue <script setup> import { defineProps, defineEmits } from 'vue'; import { ElMessage } from 'element-plus'; defineProps({ action: String, // 上传地址 }); const emit = defineEmits(['success']); const handleBeforeUpload = (file) => { const maxSize = 5 * 1024 * 1024; // 默认限制为 5MB if (file.size > maxSize) { ElMessage.error('文件过大,请选择小于 5MB 的文件'); return false; } return true; }; const handleSuccess = () => { emit('success'); // 向父级传递成功事件 }; </script> <template> <el-upload :action="action" :before-upload="handleBeforeUpload" @success="handleSuccess" > <el-button>上传文件</el-button> </el-upload> </template> ``` 通过以上封装,可以直接复用该组件而无需每次都单独设定文件大小限制逻辑[^4]。 --- ### 注意事项 - 如果需要更灵活地调整文件大小限制,建议将其作为可配置项传入组件。 - 对于跨浏览器兼容性问题,需测试不同环境下的表现以确保一致性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值