input 遍历上传文件夹

js上传文件夹

上传文件夹遍历

以下就是遍历上传文件夹里面的文件夹和文件的方法，直接复制：
这是本人第一次纯js写上传文件夹遍历，写的比较low，喜欢的盆友可以点个关注，你们的关注是我向上的动力
h5部分:

<input ref=“uploadFolder” type=“file” name=“picpath” webkitdirectory
multiple=“multiple” @change=“changesData($event)” style=“display:none”/>

js部分
async changesData (event) {
let that = this;
let lists = Array.from(event.target.files);
//分割地址字符串获取文件夹名称
let fileNames = lists[lists.length-1].webkitRelativePath.split(’/’);
//用来存储已建文件夹和文件夹id
let arrs = [];
//第一次遍历上传文件夹 lists最后一条数据
for(let i=0;i<Number(fileNames.length)-1;i++){
//文件夹名
let title= fileNames[i];
//新建文件夹接口上传对象
let postData = {};
if(i>0){
postData[‘folder_pid’] = that.file_id;
}else {
if (that.folder_id > 0)postData[‘folder_pid’] = that.folder_id;
}
postData.title = title;
//新建文件夹
await api.addFolderPost(postData).then(res => {
if (res.code != ‘1’) {
that.$message({
message: res.msg,
center: true,
type: ‘error’,
});
}else {
let id = res.data.result.id;
this.file_id = res.data.result.id;
if(i>1){
//记录已经创建的文件夹和文件夹id 创建二级文件名字拼接防止下级（3级）以后文件夹同名 i代表文件夹级数
let num = Number(i)-1;
arrs.push({
title:fileNames[num]+title+i,
id:id
});
}else {
//创建一级 二级 文件夹 记录已经创建的文件夹id i代表文件夹级数
arrs.push({
title:title+i,
id:id
});
}
//遍历上传文件 只上传刚刚创建的文件夹下的文件
for(let x=0;x<lists.length;x++){
//分割地址字符串获取文件夹名
let webpath = lists[x].webkitRelativePath.split(’/’);
if(i>1){
let inum = Number(i)-1;
//二级以后的上传的文件 拼接上一级文件夹名称跟需要上传的文件夹做比较 防止出现文件传错文件夹
//遍历上传文件 判断是否是本文件夹下的文件
if(webpath[inum]+webpath[i] == fileNames[inum]+title && webpath[Number(i)+2] == undefined){
let file = lists[x];//上传的文件
this.subscribe(file,i,id,‘0’);
}
}else {
//遍历上传文件 判断是否是本文件夹下的文件
if(webpath[i] == title && webpath[Number(i)+2] == undefined){
let file = lists[x];//上传的文件
this.subscribe(file,i,id,‘0’);
}
}
}

                    }
                })
            }
            //第二次遍历上传文件夹  lists剩下没有创建的文件夹
            for(let i=0;i<Number(lists.length)-1;i++){
                //分割字符串 获取文件名
                let webkitRelativePath = lists[i].webkitRelativePath.split('/');
                let weblen = Number(webkitRelativePath.length)-1;
                //遍历剩下的文件 判断是否已经创建文件夹
                for(let y=0;y<weblen;y++){
                    //文件夹名
                    let title= webkitRelativePath[y];
                    let bool = true;
                    for (let x=0;x<arrs.length;x++){
                        let str = arrs[x].title;
                        //获取已经创建文件夹记录title参数最后一位数字lastStr
                        let lastStr = str.charAt(Number(str.length)-1);
                        //最后一位数字大于1的是3级文件夹，小于等于1的是一二级文件夹
                        if(lastStr>1){
                            let num = Number(y)-1;
                            //二级以后的文件夹跟title对比需要拼接上一级文件夹名字，防止出现三级以及后面的文件夹创建在错误的二级文件夹内
                            if(arrs[x].title == webkitRelativePath[num]+title+y){
                                bool = false;
                            }
                        }else {
                            if(arrs[x].title == title+y){
                                bool = false;
                            }
                        }
                    }
                    if(bool){
                        let postData = {};
                        if(y>0){
                            //遍历记录已经创建的文件夹数组
                            for(let x=0;x<arrs.length;x++){
                                let str = arrs[x].title;
                                //获取已经创建文件夹记录title参数最后一位数字lastStr
                                let lastStr = str.charAt(Number(str.length)-1);
                                //最后一位数字大于1的是3级文件夹，小于等于1的是一二级文件夹
                                if(lastStr>1){
                                    let numy = Number(y)-1;
                                    let numx = Number(y)-2;
                                    //获取需要创建文件夹的上一级文件夹id
                                    if(arrs[x].title == webkitRelativePath[numx]+webkitRelativePath[numy]+numy){
                                        that.folder_pid = arrs[x].id;
                                    }
                                }else {
                                    let numy = Number(y)-1;
                                    //获取需要创建文件夹的上一级文件夹id
                                    if(arrs[x].title == webkitRelativePath[numy]+numy){
                                        that.folder_pid = arrs[x].id;
                                    }
                                }
                            }
                            postData['folder_pid'] = that.folder_pid;
                        }else {
                            if (that.folder_id > 0)postData['folder_pid'] = that.folder_id;
                        }
                        postData.title = title;
                        //新建文件夹
                        await api.addFolderPost(postData).then(res => {
                            if (res.code != '1') {
                                that.$message({
                                    message: res.msg,
                                    center: true,
                                    type: 'error',
                                });
                            }else {
                                let id = res.data.result.id;
                                this.file_id = res.data.result.id;
                                if(y>1){
                                    //记录已经创建的文件夹和文件夹id 创建二级文件名字拼接防止下级（3级）以后文件夹同名 y代表文件夹级数
                                    let num = Number(y)-1;
                                    arrs.push({
                                        title:webkitRelativePath[num]+title+y,
                                        id:id
                                    });
                                }else {
                                    //记录已经创建的文件夹和文件夹id y代表文件夹级数
                                    arrs.push({
                                        title:title+y,
                                        id:id
                                    });
                                }

                                //遍历上传文件  只上传刚刚创建的文件夹下的文件
                                for(let x=0;x<lists.length;x++){
                                    let webpath = lists[x].webkitRelativePath.split('/');

                                    //y>1的是二级以后的文件夹 <1的是一二级文件夹
                                    if(y>1){
                                        let ynum = Number(y)-1;
                                        //判断是否是本文件夹下的文件
                                        if(webpath[ynum]+webpath[y] == webkitRelativePath[ynum]+title && webpath[Number(y)+2] == undefined){
                                            let file = lists[x];//上传的文件
                                            this.subscribe(file,Number(i)+1,id,'1',lists.length);
                                        }
                                    }else {
                                        //判断是否是本文件夹下的文件
                                        if(webpath[y] == title && webpath[Number(y)+2] == undefined){
                                            let file = lists[x];//上传的文件
                                            this.subscribe(file,Number(i)+1,id,'1',lists.length);
                                        }
                                    }
                                }
                            }
                        })
                    }
                }
            }
        },