前端如何实现拖拽文件和文件夹上传

如果是点击上传文件夹，可以给input添加webkitdirectory属性，但是拖拽上传文件夹，拿不到文件所在路径，也就是webkitRelativePath值为空。下图所示：

FileSystemDirectoryEntry接口的方法createReader()返回一个FileSystemDirectoryReader 可以被用于读取在该目录中的条目的对象。 

在vue中的示例代码如下：

<template>
     <!-- style设置拖拽文件的范围 -->
    <div ref="select_frame" ondragstart="return false;" style="width:100%;height:600px;">        
    </div>
</template>

<script>

    export default {
        data(){},
        mounted() {
            
            this.$refs.select_frame.ondragleave = e => {
              e.preventDefault(); // 阻止离开时的浏览器默认行为
            };

            this.$refs.select_frame.ondrop = e => {
               e.stopPropagation(); // 防止浏览器打开新的标签页（firefox）
               e.preventDefault(); // 阻止拖放后的浏览器默认行为

               let files = [];
               let domFiles = e.dataTransfer.files;// 获取文件对象
               let len = domFiles.length;

               if(domFiles.length < 1) {
                   return ;// 检测是否有文件拖拽到页面
               }

                for (let i = 0; i < len; i++) {
                    files[i] = domFiles[i];
                }
                if (files.length) {
                    let items = e.dataTransfer.items;
                    if(items && items.length && items[0].webkitGetAsEntry != null) {
                        addFilesItems(items);
                    }
                }



                function addFilesItems(items) {
                    return (function(){

                        var ret = [];
                        for (var i = 0; i <  items.length; i++) {
                            var item = items[i];
                            var entry;
    
                            if(item.webkitGetAsEntry && (entry = item.webkitGetAsEntry())) {
                                // 上传文件
                                 if( entry.isFile) {
                                    // 写入上传文件的逻辑，调用上传接口
                                 }else if(entry.isDirectory) {
                                    // 上传文件夹
                                    ret.push(addFilesFormDirectory(entry, entry.name));
                                 }
                            }
                        }

                    })()
                }


                function addFilesFormDirectory(directory, path) {
                    const dirReader = directory.createReader();

                    const readEntries = function readEntries() {
                      return dirReader.readEntries(function(entries) {
                        entries.forEach(function(entry) {
                           // 判断是否是文件
                          if (entry.isFile) {
                            entry.file(function(fileData) {
                              console.log(fileData);
                               // 用fullPath的值来代替webkitRelativePath
                               fileData.fullPath = path + "/" + fileData.name;
                                // 同上面的上传文件代码

                            })
                          }else if (entry.isDirectory) {
                             // 如果还是文件夹,则递归处理
                            addFilesFormDirectory(entry, path + "/" + entry.name);
                          }
                        })
                    }
                }


            }

            this.$refs.select_frame.ondragenter = e => {
               e.preventDefault(); // 阻止拖入时的浏览器默认行为
            };
            this.$refs.select_frame.ondragover = e => {
              e.preventDefault(); // 阻止拖来拖去的浏览器默认行为
            };
        }
    }
</script>