网页上传文件夹 Angular + NetCore API 实现

最新推荐文章于 2024-05-08 14:50:03 发布

原创

最新推荐文章于 2024-05-08 14:50:03 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#文件夹上传 #Netcore API #Angular #webkitdirectory

本文详细介绍了前端使用Angular实现文件夹选择上传，并通过webkitdirectory属性获取文件完整路径，循环调用后端接口逐个上传。后端采用.netcoreapi接收文件流，保存到本地，构建与上传相同的目录结构。关键代码和技术点均有展示。

1、实现原理

前端采用 webkitdirectory 属性选择文件夹，然后遍历文件夹中的文件，循环调用后端接口一个文件一个文件的上传。某度网盘也是同样的原理。

2、前端实现

本文记录了Angular的写法，原生html+js的方式代码也差不多。模板页面代码如下：

<input type="file" (change)="selectFolder($event)" webkitdirectory />

ts 代码 selectFolder 方法如下：

  selectFolder(event: any) {
    let files = event.target.files;
    console.log(files);
    for (let i = 0; i < files.length; i++) {
      let formData = new FormData();
      formData.append("file", files[i]);
      this.http.post("http://127.0.0.1:8888/api/xx