element 文件上传大小控制

前端文件上传限制：判断文件大小并返回错误

转载已于 2022-04-01 17:09:26 修改 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/xin_yun_Jian/article/details/103620480

文章标签：

#vue.js #编辑器 #其他

于 2022-04-01 17:07:24 首次发布

element - ui 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何在Element UI的上传组件中实现文件大小限制，通过before-upload事件判断文件大小超过10MB时返回false，确保上传文件不超过指定范围。

1.页面代码

 <el-upload :show-file-list="false" class="upload-demo" :before-upload="beforeUpload" :on-progress="onProgress" :on-success="onSuccess" :on-error="onError" action="/api/upload">
       <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

在before-upload事件中判断文件大小，不符合返回false

beforeUpload(file) {

                    let fileObj = {
                          name: file.name,
                          size: file.size,
                          status: "开始上传",
                          process: 0,
                          id: file.uid
                    }
                    if (file.size > 100 * 1024 * 1024) {
                          console.log('上传文件过大', file.size)
                          return false   //必须返回false
                    }
                    this.fileList.push(fileObj)

              },

————————————————
版权声明：本文为优快云博主「franklin_yuan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/xin_yun_Jian/article/details/103620480