el-upload实现上传文件夹(批量上传文件),支持按钮式触发click()唤起上传弹窗(有助于少写一些el-upload节点,做到写一个el-upload组件多处使用)

el-upload实现上传文件夹(批量上传文件),支持按钮式触发click()唤起上传弹窗(有助于少写一些el-upload节点,做到写一个el-upload组件多处使用)_第1张图片


el-upload实现上传文件夹(批量上传文件):关键代码在于

this.$refs.uploadFolder.$children[0].$refs.input.webkitdirectory = true;//让el-upload支持上传文件夹

特性:

  1. 支持批量上传文件夹内所有文件
  2. 支持中断放弃上传
  3. 支持欺骗加载动画效果(1%~99%一直加载直到真的上传完毕自动变成100%)
  4. 支持按钮式触发click()唤起上传弹窗(有助于少写一些el-upload节点,做到写一个el-upload组件多处使用)

    
 

这里面用到的sgUploadTray组件在这里【sgUploadTray】上传托盘自定义组件,可实时查看上传列表进度_你挚爱的强哥的博客-CSDN博客【sgUploadTray】上传托盘自定义组件,可实时查看上传列表进度。https://blog.csdn.net/qq_37860634/article/details/131721614

已经封装成了一个组件sgUpload,开箱即用,无需关注内部运作机制

【sgUpload】自定义上传组件,支持上传文件夹及其子文件夹文件、批量上传,批量上传会有右下角上传托盘出现,支持本地上传图片转换为Base64image_你挚爱的强哥的博客-CSDN博客【代码】【sgUpload】自定义上传组件,支持上传文件夹及其子文件夹文件、批量上传,批量上传会有右下角上传托盘出现,支持本地上传图片转换为Base64image。https://blog.csdn.net/qq_37860634/article/details/131953758

你可能感兴趣的:(Vue.js,批量上传文件,el-upload,uploadList)