ElementUI浅尝辄止38:Upload 上传

通过点击或者拖拽上传文件实现上传功能,常见于文件、文件夹或图片上传,使用挺频繁的。需要熟练掌握

1.如何使用?点击上传

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limiton-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。


  点击上传
  
只能上传jpg/png文件,且不超过500kb

2.用户头像上传

使用 before-upload 限制用户上传的图片格式和大小。


  
  




3.照片墙

使用 list-type 属性来设置文件列表的样式。


  


  

4.文件缩略图

使用 scoped-slot 去设置缩略图模版。


    
    

5.图片列表缩略图


  点击上传
  
只能上传jpg/png文件,且不超过500kb

6.上传文件列表控制

通过 on-change 钩子函数来对列表进行控制


  点击上传
  
只能上传jpg/png文件,且不超过500kb

7.拖拽上传


  
  
将文件拖到此处,或点击上传
只能上传jpg/png文件,且不超过500kb

8.手动上传


  选取文件
  上传到服务器
  
只能上传jpg/png文件,且不超过500kb

关于上传组件的大致内容就是这些,需要继续深入浅出的,可前往上传组件

你可能感兴趣的:(element-ui,elementui)