在本文中，我们将研究如何在基于angular的web应用程序中创建文件上传功能。读更多!

获得高级管理人员手册的重要趋势、技巧和战略，以竞争和赢得数字经济。

directoryentry（directory）

在Lucidpress公司，我们最近决定通过创建一个全新的图像管理器来修改我们的图像管理器体验。我们想要添加的一个关键的新特性是批量图像上传，这是在保持原始文件夹结构的同时，上传一个包含所有内容的文件夹的能力。有两种方法可以让用户启动文件夹上传:

拖放一个文件夹

提供一个允许文件夹选择的文件选择器。

为了找到处理文件夹上传的现代方法，我们进行了一些研究。我编译了一些代码片段，并将其解释为对其他人的快速参考。下面我们来看看如何在web应用程序中实现这个功能。

拖拽

随着HTML5的发展，它已经成为一个很好的拖放API。当您删除一个文件夹时，将收到一个文件项作为数据传输的一部分的drop事件。访问该文件夹内容的惟一方法是通过webkit文件系统API，它不是HTML5的一部分。DataTransfer文件有一个webkitGetAsEntry方法，它返回该文件的webkitEntry(只支持Chrome、Firefox和Edge)。每个webkit条目可以是一个文件，也可以是一个directory-use isFile和isDirectory来确定哪种类型。

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) {

…

} else if (entry.isDirectory) {

…

}

}

}

}

如果条目是一个文件条目，那么可以使用file方法访问文件blob。

function parseFileEntry(fileEntry) {

return new Promise((resolve, reject) => {

fileEntry.file(

file => {

resolve(file);

},

err => {

reject(err);

}

);

});

}

如果条目是一个目录条目，那么目录中的所有子条目都可以通过目录阅读器上的readEntries方法访问。通过在目录条目上调用createReader方法，为目录条目创建一个目录阅读器。

function parseDirectoryEntry(directoryEntry) {

const directoryReader = directoryEntry.createReader();

return new Promise((resolve, reject) => {

directoryReader.readEntries(

entries => {

resolve(entries);

},

err => {

reject(err);

}

);

});

}

角度提供的唯一帮助是能够轻松地将组件方法绑定到拖放事件。如果您的组件有公共方法dragenter、dragover和drop，您可以这样绑定它们:

<div

id=”drop-area”

(dragenter)=”dragenter($event)”

(dragover)=”dragover($event)”

(drop)=”drop($event)”

>

</div>

文件夹选择器

上传文件的标准方法是让用户点击类型文件的输入HTML元素。这允许用户在给定多个属性时选择多个文件。HTML5本身并不支持文件选择器的目录模式，但是webkit可以给我们这个功能。将webkitdirectory属性添加到类型文件的输入中，它只允许选择文件夹。一旦用户选择了他们的文件夹，更改事件就会被触发，并且有效负载包含在文件属性中。

<input

#folderInput

type=”file”

(change)=”filesPicked(folderInput.files)”

webkitDirectory

>

这里不需要目录树解析，因为返回的有效负载是一个FileList对象，它包含在所选目录中任何深度存在的每个文件。每个文件的webkitRelativePath属性包含一个字符串，表示所选目录的相对路径。可以解析此字符串以从用户的文件系统重新创建树结构。

function filesPicked(files) {

for (let i = 0; i < files.length; i++) {

const file = files[i];

const path = file.webkitRelativePath.split(‘/’);

// upload file using path

…

}

}

在此场景中，唯一的帮助角提供是能够方便地为快速引用命名输入元素，以避免调用document.getElementById。

正如你所看到的，虽然可以很容易地集成到现有的角应用程序中，但是文件夹的上传是可以实现的，但是这些webkit文件夹的功能目前只支持Chrome、Firefox和Edge。