如何使用JavaScript（Vue.js）上传zip并实现base64转存与目录解压

核心认知纠偏 #

• 你当前通过FileReader.readAsDataURL拿到的base64字符串，本质就是选中的zip文件经过编码后的内容，完全不需要额外执行“把base64重新写回成zip文件”的冗余步骤
• 浏览器前端运行在隔离沙箱环境中，没有权限直接将文件写入到服务器端的项目物理目录，所有文件存储、目录解压的操作必须由后端服务完成，前端仅负责将文件内容安全传输到后端即可
• 相比直接传输原始File对象，转成base64会让文件体积增加约30%，传输效率更低，非必要不建议用base64格式传文件

前端侧改造方案 #

完全可以去掉手动转FileReader的步骤，直接拿到文件选择组件返回的原始File对象，通过标准multipart/form-data格式上传给后端即可，改造后的代码示例：

uploadZip() {
  const zipFile = this.zipFile
  // 无选中文件时直接终止逻辑
  if (!zipFile) return
  // 构造表单数据承载文件内容
  const formData = new FormData()
  formData.append('uploadedZip', zipFile, zipFile.name)
  // 调用后端上传接口
  axios.post('/api/project/deal-zip', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    console.log('文件处理完成', res.data)
  }).catch(err => {
    console.error('上传失败', err)
  })
}

如果业务场景必须要传base64格式，需要记得把拿到的dataUrl前缀（格式为data:application/zip;base64,）裁掉，剩余部分才是实际的文件编码内容。

后端侧需要实现的逻辑 #

前端请求到达后端后，依次完成以下操作即可满足需求：

• 先做安全校验：判断文件是否为合法zip格式、校验文件大小、检查文件后缀，避免恶意文件上传
• 把接收到的zip文件临时存储到服务器临时目录
• 调用服务端对应的压缩包处理能力，将zip内的文件解压到指定的项目目标目录，解压过程中必须增加路径穿越校验，防止压缩包内带特殊跳转路径的文件写入到项目目录之外的位置
• 解压完成后删除临时存储的zip文件，将处理结果返回给前端

纯浏览器本地处理的扩展场景 #

如果需求不是将文件存到服务器项目目录，而是完全在浏览器端完成解压（比如将解压内容存在浏览器本地存储、通过用户授权写入到本地文件夹），可以借助jszip库实现，无需额外转base64，直接加载原始File对象即可完成解压，遍历得到压缩包内的每个文件内容后，再根据需求做本地存储、下载即可。

内容的提问来源于stack exchange，提问作者justAnAnotherCoder