element-ui 上传压缩文件之前,获取这个压缩文件解压后的大小。

381 阅读1分钟
<template>
  <el-upload
    action="/your-upload-api-endpoint"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">选择文件</el-button>
  </el-upload>
</template>

<script>
import JSZip from 'jszip';

export default {
  methods: {
    async beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const maxSize = /* 设置允许的最大文件大小 */;
        
        // 使用JSZip解压缩文件
        const jszip = new JSZip();
        jszip.loadAsync(file).then(zip => {
          // 获取解压后的文件列表
          const filePromises = [];
          zip.forEach((relativePath, zipEntry) => {
            filePromises.push(zipEntry.async("uint8array"));
          });

          // 计算解压后的文件总大小
          Promise.all(filePromises).then(fileDataArray => {
            const uncompressedFileSize = fileDataArray.reduce(
              (totalSize, fileData) => totalSize + fileData.length,
              0
            );

            if (uncompressedFileSize <= maxSize) {
              resolve(file);
            } else {
              reject(new Error("解压后的文件大小超过限制"));
            }
          });
        }).catch(error => {
          reject(error);
        });
      });
    },
  },
};
</script>

在上述示例中,我们使用jszip库加载上传的压缩文件,然后遍历解压后的文件列表,计算每个文件的大小,并将它们相加以获得解压后的总大小。然后,我们将总大小与允许的最大文件大小进行比较,以决定是否允许文件上传。