vue jszip读取zip文件防止乱码并输出里面的图片，提供vue代码

可以使用JSZip库来读取zip文件，并使用FileSaver库将文件下载到本地。以下是一个Vue组件示例，该组件读取zip文件并将其中的图片文件解压并下载到本地：

<template>
  <div>
    <input type="file" @change="selectZipFile">
    <button @click="downloadImages">Download Images</button>
  </div>
</template>

<script>
import JSZip from 'jszip';
import FileSaver from 'file-saver';

export default {
  name: 'ZipReader',
  data() {
    return {
      zipFile: null,
      images: [],
    };
  },
  methods: {
    selectZipFile(event) {
      this.zipFile = event.target.files[0];
    },
    async downloadImages() {
      if (!this.zipFile) {
        alert('Please select a zip file!');
        return;
      }

      const zip = new JSZip();
      const zipFile = await zip.loadAsync(this.zipFile);

      const imagePromises = [];
      zipFile.forEach((relativePath, zipEntry) => {
        if (zipEntry.dir) {
          return;
        }

        const ext = relativePath.split('.').pop();
        if (['jpg', 'jpeg', 'png', 'gif'].includes(ext.toLowerCase())) {
          const imagePromise = zipEntry.async('base64')
            .then((base64Data) => {
              this.images.push({
                name: zipEntry.name,
                data: base64Data,
              });
            });
          imagePromises.push(imagePromise);
        }
      });

      await Promise.all(imagePromises);

      this.images.forEach((image) => {
        const byteCharacters = atob(image.data);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        const blob = new Blob([byteArray], { type: 'image/jpeg' });
        FileSaver.saveAs(blob, image.name);
      });
    },
  },
};
</script>

该组件包含一个input元素，以便用户选择zip文件。当用户选择zip文件后，组件将其加载到JSZip对象中。然后，组件遍历zip文件中的所有文件，并仅选择图片文件。对于每个图片文件，组件将其解码为Base64字符串，并将其添加到images数组中。最后，组件遍历images数组，并使用FileSaver库将每个图像文件下载到本地。