压缩包上传+文件上传+多文件拖拽上传

1. 压缩包上传

// html  以angular为例
<label for="zipload" (click)="uploadZip()">上传压缩包</label>
<input type="file" id="zipload" (change)="uploadZip(')" accept=".zip,.gz" />
 
// js
uploadZip() {
  // 获取上传压缩包
  const file = this.elementRef.nativeElement.querySelector('#zipload').files[0];
  const fileName = file.name; // 文件名
  const fileSize = file.size / 1024 / 1024; // 文件大小
  const formData = new FormData(); // 创建 FormData 对象
  if (choice === 'save_as') { // 重复文件另存为
    formData.append('file', file, this.info.filename); // 最后一个参数是另存为的名字
  } else {
    formData.append('file', file);
  }
}

2. 文件上传

2.1 JSZip

# 安装 JSZip
npm i jszip

const zip = new JSZip();
// 获取 DOM对象
const inpDom = this.elementRef.nativeElement.querySelector('#fileload');
// 获取文件集合
let fileList = inpDom.files;
const fileName = fileList[0].name; // 文件名
const fileSize = fileList[0].size / 1024 / 1024; // 文件大小

// 压缩
zip.generateInternalStream({
  type: 'blob',
  compressionOptions: {
    level: 8 // 压缩等级，1级最低，9级压缩比最高
  }
}).accumulate((metadata) => {
  // 上传过程中，即使退出去了，文件依然在压缩中
  if (!sessionStorage.getItem('token')) {
    zip.remove(filepath); // 如果 token 失效，则删除该压缩文件
  }
  const progress = metadata.percent; // 压缩进度
}).then((content) => {
  // 压缩完成
  const formData = new FormData();
  formData.append('file', content, fileName + '.zip');
})

3. 多文件拖拽上传

// html 拖拽  angular 为例
<div (dragover)="relayFileDragover($event)" (drop)="relayFileDrop($event)"></div>
// 多文件上传
<label for="files">点击上传</label>
<input type="file" id="files" class="dis-none" multiple (change)="relayFileClick($event)" />
    
// js
relayFileDragover(e) {
  e.preventDefault();
  e.stopPropagation();
}

// 拖拽上传文件
relayFileDrop(e) {
  e.preventDefault();
  e.stopPropagation();
  const fileList = []; // 存储拖拽的文件列表
  const dataTransfer = e.dataTransfer;
  
  if (dataTransfer.items !== undefined) {
    for (let i = 0, len = dataTransfer.items.length; i < len; i++) {
      const file = dataTransfer.items[i];
      const fileInfo = file.getAsFile(); // 返回 File 对象
      // 如果为文件
      if (file.webkitGetAsEntry().isFile) {
        fileList.push(fileInfo);
      } else { // 文件夹
      }
    }
  } else { // IE浏览器
    for (let i = 0, len = dataTransfer.files.length; i < len; i++) {
      const file = dataTransfer.files[i];
      fileList.push(file);
    }
  }
}

// 点击多文件上传
relayFileClick(e) {
  const fileList = Array.from(e.target.files);
}