vue上传图片组件（支持拖拽文件夹上传）

来源：互联网发布：单片机串口啥意思编辑：程序博客网时间：2024/06/07 23:40

点击打开源码 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]);      }    }  })},

阅读全文

0 0