谈一谈开发网盘中碰到的问题（一）

谈一谈开发网盘中碰到的问题（一）

首先介绍一下项目：土星云企业网盘(http://www.saturncloud.com.cn/netdisk),一款基于vue+element ui面向企业和用户的人员管理和存储网盘。主要功能包含：文件、文件夹并行上传下载，复合文件（超过4G）的上传、下载。文件、文件夹分享功能，文件夹共享功能。文件、文件夹重命名、复制、移动功能。文件、文件夹批量删除、下载、移动功能。已删除文件、文件夹批量还原、彻底删除功能。上传下载列表展示功能。内部共享功能，公共资源功能。人员管理链接邀请成员功能。企业信息和产品套餐功能等。基本功能类似百度企业网盘。

本项目，上传采用的是ipfs分布式存储上传。感兴趣的童鞋可以了解一下。因为和传统的http上传下载不同，所以在前端处理上会用到许多知识点。首先，所有的上传下载都依赖以’Saturn Agent '命名的桌面客户端。不同的系统对应不同的客户端。

本项目文件上传可以概括为：

1.file_upload 检查内存是否充足

2.random 生成密钥(45位字符串,文件加密/解密密钥，multibase-Base58BTC编码)

3.pack(POST multipart/form-data) 将文件size，random返回值等作为参数，对原始文件进行处理，完成压缩、加密、切片。返回Multihash等值

4./ws/up 文件上传接口，将数据块、链接块 分发给不同的存储节点冗余编码计算（并行），生成 校验块 分发给不同的存储节点使用websocket协议反馈数据上传进度、速度信息。将pack返回的Multihash作为文件标识，socket更新的percent同步上传列表文件进度。为防止因网速等因素导致token失效，在同步进度同时要在socket推送过程中触发/combo/123请求来延长token

5.Add_file 服务器上传(普通文件is_dir传-1，文件夹传1，复合文件传2)，ipfs上传完毕后将文件上传到服务器上。

由此，是一个普通文件的上传过程。如果选择多个文件的话，则循环重复上述操作。如果选择文件夹的话，则通过我自己封装的一个方法（后面会介绍）来判断如果是文件夹的话则is_dir传1，如果是文件的话依然重复上述操作。这里主要需要注意一个问题，选择上传的文件夹里面的文件、文件夹路径要跟最终页面上展示的一模一样。

Q1:浏览器解析文件夹files属性后返回的文件信息不满足或不好处理文件上传业务

处理方法：封装我需要的文件信息结构

let TREE = function (name, is_dir) {
                                this.name = name;
                                this.is_dir = is_dir;
                                this.path = "";
                                this.index;
                                this.size;
                                this.children = [];
                                this.add = function (child) {
                                    this.children.push(child);
                                };
                            };
                            var now_dir;
                            var children;
                            let root = new TREE(
                                folder[0].webkitRelativePath.split("/")[0],
                                1
                            );
                            for (var i = 0; i < folder.length; i++) {
                                var folderPath = folder[i].webkitRelativePath.split("/");
                                now_dir = root;
                                for (var j = 1; j < folderPath.length - 1; j++) {
                                    var find_flag = 0;
                                    for (var k = 0; k < now_dir.children.length; k++) {
                                        if (now_dir.children[k].is_dir == 1)
                                            children = now_dir.children[k];
                                        else continue;

                                        if (children.name == folderPath[j]) {
                                            find_flag = 1;
                                            now_dir = children;
                                            break;
                                        }
                                    }

                                    if (find_flag == 0) {
                                        let new_dir = new TREE(folderPath[j], 1);
                                        now_dir.add(new_dir);
                                        now_dir = new_dir;
                                    }
                                }

                                let file = new TREE(folderPath[j], 0);
                                file.path = folder[i].webkitRelativePath;
                                file.index = folder[i];
                                file.size = folder[i].size
                                now_dir.add(file);
                            }
                            console.log(root)

分别打印选择文件、多文件、层级复杂文件夹封装前后的浏览器解析结构

单个文件
多个文件
文件夹封装前后对比

又到了快下班的时间，干饭去～