javascript - 使用 Angular Js 上传文件夹

Question

我知道 Angular Js 可以上传文件。但是我研究了一下，没有规定要上传整个文件夹。我正在研究 ASP.NET Core。

是否可以使用 AngularJS 上传文件夹。也欢迎其他选择。我还想知道 ASP.NET Core 中的 FolderBrowserDialog 等价物是什么。

Answer 1

现代浏览器支持 File and Directory Entries API允许处理目录(文件夹)。在撰写本文时，这 works in Chrome, Firefox, Edge and Safari TP (没有旧的 IE 支持)。

您至少有两种方法来实现它(为获得最佳用户体验而同时执行这两种方法可加分!)。

方法一:使用文件输入

通过 webkitdirectory 赋予标准 input 元素处理目录的能力属性:

<input
    #folderInput
    type="file"
    (change)="filesPicked(folderInput.files)"
    webkitDirectory
>

注意:上面的 HTML 片段假设使用的是 Angular 2+，但您可以在 Angular 1 中轻松地做同样的事情

folderInput.files 将是文件夹内所有文件的平面列表，无需递归地遍历树或类似的东西。只需像这样在一个简单的循环中遍历文件:

function filesPicked(files) {
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const path = file.webkitRelativePath.split('/');
        // upload file using path
        ...
    }
}

属性(property)webkitRelativePath ，顾名思义，包含相对于用户选择的祖先目录的文件路径。

方法二:使用拖放

同一文件和目录条目 API 的另一部分是 DataTransferItem.webkitGetAsEntry()它返回一个 FileSystemFileEntry 或 FileSystemDirectoryEntry。如果它是 directlry，您可以通过调用 FileSystemDirectoryEntry.createReader() 检索的 FileSystemDirectoryReader 读取它。下面是一个处理拖放事件的简单示例:

function drop(event) {
    const items = event.dataTransfer.items;
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.kind === 'file') {
            const entry = item.webkitGetAsEntry();
            if (entry.isFile) {
                 return new Promise((resolve, reject) => {
                    entry.file( 
                        file => {
                            resolve(file);
                        },
                        err => {
                            reject(err);
                        }
                    );
                });
            } else if (entry.isDirectory) {
                const directoryReader = entry.createReader();
                return new Promise((resolve, reject) => {
                    directoryReader.readEntries(
                        entries => {
                            resolve(entries);
                        },
                        err => {
                            reject(err);
                        }
                    );
                });
            }
        }
    }
}

我的同事写了 a short article更详细地解释该方法(免责声明:我为那家公司工作)。

这是文章中的一个完整的 Plunkr 演示:https://plnkr.co/edit/rFC9Ln