文件上傳

async handleDrop(event) {
   // drop
   console.log("event", event);
   // console.log(event.dataTransfer.items, '文件上傳')
   this.MessagePrompt('文件上傳中', 'success');
   this.dragTag = 0;
   event.preventDefault();
   this.isDragging = false;

   const items = event.dataTransfer.items;
   let singles = [],
     count = 0,
     length = items.length;
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     console.log("item----", item);
     const entry = item.webkitGetAsEntry();
     console.log("eventData", entry);
     if (entry.isDirectory) {
       // 文件夾上傳
       console.log('文件夾上傳')
       this.uploadFilesRecursive(entry);
     } else {
       // 文件上傳
       entry.file((file) => {
         count++;
         console.log("singles", file, singles, count, length);
         singles.push(file);
         if (count == length) {
           this.isCompert(singles)
         }
       });
     }
   }
 },

文件夾讀取

async uploadFilesRecursive(entry) {
      let $this = this;
      function getFileData(items) {
        const handle = (list) => {
          const promiseAll = list.map((entry) =>
            entry.isDirectory ? fn(entry) : getFile(entry)
          );
          return Promise.all(promiseAll);
        };
        const fn = (fileSystemEntry) => {
          const reader = fileSystemEntry.createReader();
          return new Promise((res) => {
            reader.readEntries((result) => {
              if (result.length == 0) {
                let name = fileSystemEntry.fullPath.slice(1);
                let fileData = new File([fileSystemEntry], name, { type: "Folder" });

                res(fileData);
              } else {
                let resultFile = result.filter((f) => {
                  if (checkFileName(f.name)) return f;
                  return null;
                });
                if (resultFile.length == 0) {
                  let name = fileSystemEntry.fullPath.slice(1);
                  let fileData = new File([fileSystemEntry], name, { type: "Folder" });

                  res(fileData);
                }

                res(handle(resultFile));
              }
            });
          });
        };
        return handle(items);
      }
      function getFile(entry) {
        if (!checkFileName(entry.name)) return "";
        return new Promise((resolve, reject) => {
          entry.file(
            (file) => {
              let name = entry.fullPath.slice(1);
              let fileData = new File([file], name, {
                type: file.type,
                webkitRelativePath: name,
              });

              resolve(fileData);
            },
            (err) => {
              reject(err);
            }
          );
        });
      }

      // 過濾特殊字符的文件名
      let filterArray = ["._", "~$", ".~"];
      function checkFileName(fileName) {
        if (
          filterArray.filter((f) => {
            if (fileName.startsWith(f)) return f;
          }).length > 0
        )
          return false;
        if (fileName == ".DS_Store") return false;
        return true;
      }

      function flatten(arr) {
        return arr.reduce(
          (acc, val) => (Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val)),
          []
        );
      }

      let list = await getFileData([entry]);

      list = flatten(list);
      list = list.reverse();
      let filterList = list.filter((f) => {
        if (f != "") return f;
      });
      console.log("files", list);

      if (filterList.length == 0) return;
      // 將數(shù)據(jù)分成每組1000條
      function chunkArray(array, chunkSize) {
        const result = [];
        for (let i = 0; i < array.length; i += chunkSize) {
          result.push(array.slice(i, i + chunkSize));
        }
        return result;
      }
      // 將數(shù)據(jù)拆分成每組1000條
      const chunks = chunkArray(filterList, 1000);
      console.log("chunks", chunks);
      // 發(fā)送請求
      // $this.isCompert(list);
    },

判斷文件是否重復

    async isCompert(files) {
      // console.log(files, '接受的文件')
      let $this = this;
      $this.compertFlag = false
      let list = files;
      let nameList = files.map(item => {
        if (item.webkitRelativePath) {
          return {
            name: "/" + item.webkitRelativePath,
            size: item.size
          }
        } else {
          return {
            name: "/" + item.name,
            size: item.size
          }
        }
      })
      let data = {
        FileName: '',
        ProjectId: this.params.ProjectId,
        ProIdentityid: this.params.ProjectIdentityId,
        ParentId: this.params.ParentId,
        Size: ''
      }
      console.log(nameList, data, this.params, 'nameList')
      for (let i = 0; i < nameList.length; i++) {
        console.log(i, '一步了嘛')
        data.FileName = nameList[i].name
        data.Size = nameList[i].size
        const res = await checkProjectfile(data)
        console.log(res, '請求結果')
        if (res.code == 200) {
          let flag
          if (res.data.FileId) {
            obj.fileId = res.data.FileId
            flag = true
          }
          if (flag) {
            // 如果有重名的
            $this.compertShow = true;
            $this.compertKeepList = list[i];
          } else {
            // 不重名
            $this.pushFile(list[i])
            $this.isUploading = true;
            if ($this.allDone) {
              $this.newUpdate($this.upLoadingFiles)
            }
          }
        } else {
          $this.MessagePrompt(res.message, 'error');
        }
      }
    },

添加上傳列表

   //往上傳列表添加文件
    async pushFile(list, flag) {
      console.log(list, '獲取list')
      const data = {}
      //  const res = await getProjectfileToken()
      if (res.code == 200) {
        const client = new OSS({
          // yourRegion填寫B(tài)ucket所在地域。Region填寫為oss-cn-hangzhou单旁。
          // region: "oss-cn-beijing", //我的存儲是北京抬闷，可根據(jù)具體配置自行修改
          region: 'oss-cn-shanghai',
          // 從STS服務獲取的臨時訪問密鑰（AccessKey ID和AccessKey Secret）顶燕。）（后臺接口返回）
          accessKeyId: res.accessKeyId,
          accessKeySecret: res.accessKeySecret,
          // 從STS服務獲取的安全令牌（SecurityToken）粱锐。
          stsToken: res.securityToken,
          // 填寫B(tài)ucket名稱。
          bucket: 'zzl-filerepostorypublic',
          endpoint: "https://oss-cn-shanghai.aliyuncs.com"
        })
        client().multipartUpload(fileName, file, {}).then(res => {
          console.log(res)
        })
      }
      //獲取憑證

    },