vue上传图片组件(支持拖拽文件夹上传)

点击打开源码 https://github.com/317482454/vue_upload

在线查看地址:http://jqvue.com/demo/vue_upload/demo.html


1.获取拖拽上传对象

drop(el) {
  el.stopPropagation();
  el.preventDefault();
  this.fileList(el.dataTransfer);
}
2.处理获取到的文件

fileList(fileList) {
  let files = fileList.files;
  for (let i = 0; i < files.length; i++) {
    //判断是否为文件夹
    if (files[i].type != '') {
      this.fileAdd(files[i]);
    } else {
      //文件夹处理
      this.folders(fileList.items[i]);
    }
  }
},
3.分别出是否为文件夹

这里用到了webkitGetAsEntry(),谷歌跟火狐支持,ie不支持,

通过createReader().readEmtries转换成file文件

判断isFile是否为文件

//文件夹处理
folders(files) {
  let _this = this;
  //判断是否为原生file
  if (files.kind) {
    files = files.webkitGetAsEntry();
  }
  files.createReader().readEntries(function (file) {
    for (let i = 0; i < file.length; i++) {
      if (file[i].isFile) {
        _this.foldersAdd(file[i]);
      } else {
        _this.folders(file[i]);
      }
    }
  })
},

你可能感兴趣的:(web前端)