今天 我们利用VUE框架，借助element-ui中的el-upload组件，实现了上传文件到后台，并对文件格式及巨大细小进行管束的功能。接下来 我将详细介绍怎么在beforeUpload函数中施行上传前的操作，对文件进行巨大细小和类型管束，以及怎么通过handleFileUploadProgress设置上传时的loading状态，以避免用户再来一次点击。

据相关数据看得出来文章浏览量已达2.3万次点赞14次收藏22次。本文将详细介绍怎么在Element UI的el-upload组件中设置文件巨大细小管束， 当上传文件超出20MB时将看得出来警告并阻止上传。通过监听'on-change'事件， 检查文件巨大细小，并用msgbox展示警告信息，一边移除超出巨大细小的文件。代码示例详细展示了整个实现过程，对于前端开发中处理上传文件巨大细小管束具有参考值钱。

在用element进行文件上传时我们常常需要设置上传文件的巨大细小管束。本文将深厚入探讨怎么实现这一功能。先说说当文件超出20MB时系统将提示“文件巨大细小不能超出20MB，请沉新鲜上传”。接下来 我们将探讨el-upload组件的用，该组件允许用户上传文件，并能进行一系列的定制和管束，以满足各种需求。

el-upload组件给了上传文件巨大细小管束的控制。其实现方法很轻巧松，只需要在el-upload组件上加上属性limit即可。一边，为了让用户更优良地了解上传文件巨大细小的管束，还能用before-upload钩子函数进行提示。

下面是一个具体的代码示例：

  
  点击上传  
  
    
    只能上传不超出 1MB 的文件  
  
  

三、 before-upload钩子函数

before-upload钩子函数是一个非常关键的钩子函数，在文件上传前会被施行。我们能在该函数中对文件的类型及巨大细小进行检查，如果检查不通过能阻止上传的操作。

五、 文件类型的校验

除了文件巨大细小之外我们还需要对文件类型进行校验。在实际开发中，我们兴许需要上传的图片仅支持jpg和png格式，这时我们需要对文件的类型进行校验。

{  video: {    limit: ,    message: '视频巨大细小不能超出 50KB!'  },  zip: {    limit: ,    message: '压缩文件巨大细小不能超出 20KB!'  }}

上传文件巨大细小管束的实现有许多种方案，el-upload组件是其中一种方便容易用的方案。我们能通过设置el-upload组件的limit属性对上传文件的巨大细小进行管束， 并能通过before-upload钩子函数来进行文件的校验，一边也能通过accept属性来管束上传文件的类型。

。本文展示了怎么对Element-UI的上传组件进行封装，以管束上传文件的后缀、文件名长远度和文件巨大细小。

欢迎用实际体验验证观点。