Angular 6中如何启用文件夹上传？Ngx-dropzone-Wrapper相关方案咨询

一、为Ngx-dropzone-Wrapper添加文件夹选择功能 #

Ngx-dropzone-Wrapper是原生Dropzone的Angular封装，完全可以通过webkitdirectory/directory API实现文件夹选择，具体步骤如下：

1. 配置Dropzone选项，注入原生属性
   在组件的Dropzone配置中，通过init钩子给内置的文件输入框添加文件夹选择相关属性：

dropzoneConfig = {
  url: '/your-upload-endpoint',
  autoProcessQueue: false,
  addRemoveLinks: true,
  init: function() {
    const inputEl = this.element.querySelector('input[type="file"]');
    // 兼容webkit内核浏览器（Chrome、Edge、Safari）
    inputEl.setAttribute('webkitdirectory', '');
    // 兼容Firefox
    inputEl.setAttribute('directory', '');
    // 处理选中的文件夹文件
    this.on('addedfile', (file) => {
      // 通过webkitRelativePath获取文件在文件夹中的相对路径，用于保持目录结构
      console.log('文件相对路径:', file.webkitRelativePath);
    });
  }
};

2. 兼容性说明

• webkitdirectory支持Chrome、Edge（Chromium内核）、Safari；
• directory是Firefox的标准属性；
• 目前IE不支持文件夹选择API，若需兼容IE需额外做降级处理。

二、替代插件推荐（支持文件夹+分片上传） #

如果上述方案无法满足需求（比如需要更完善的跨浏览器支持或更丰富的内置功能），可以考虑以下Angular生态的上传插件：

• Ngx-uploader

  • 原生支持文件夹选择，可通过配置开启；
  • 内置分片上传功能，可自定义分片大小、并发数；
  • 支持拖拽上传、进度监听，配置灵活。

• ngx-filepond（FilePond的Angular封装）

  • 支持拖拽文件夹选择，自动遍历子目录文件；
  • 内置分片上传、断点续传功能；
  • UI美观，跨浏览器兼容性好，支持自定义样式。

• Uppy（Angular集成版）

  • 支持文件夹选择、分片上传，功能全面；
  • 支持断点续传、多源文件上传，可与多种存储后端集成；
  • 提供丰富的插件扩展，满足复杂上传场景。

内容的提问来源于stack exchange，提问作者Jayesh Gupta