webuploader 上传文件夹 怎样获取文件夹名称 及 目录

Question

现在使用 vue 搭建的文件管理项目 其中上传文件方面 使用百度的 webuploader上传插件

        $('.webuploader-element-invisible').attr('webkitdirectory', '')

这一段代码 是支持可以上传文件夹

现在要支持上传文件夹 并根据文件夹的名字 及 文件夹下面的目录 创建相应的文件夹 那么如何才能获取到文件夹 本身的名称 和 文件夹下面目录的名称

效果类似于 百度网盘 上传文件夹

Answer 1

前端调试的时候，可以清楚看出webkitRelativePath的值，见如下截图：

具体代码为：

 //上传之前获取 文件夹相对路径，
    uploader.on('uploadBeforeSend', function(object, data, headers) {
        // 如果是webkitdirectory控件选择的文件，会包含webkitRelativePath属性，添加进formData发送
        console.log("uploadBeforeSend日志：");
        console.log(object);//打印此对象，可以查看webkitRelativePath值
        data.relativepath = object.file.source.source.webkitRelativePath ? object.file.source.source.webkitRelativePath : '';
        console.log("webkitRelativePath:"+data.relativepath);
    });

需要注意的是，选择图片文件夹上传时，要把设置，compress:false,（上传前不压缩图像）
否则webkitRelativePath为空，获取不到。