图片导出 - 技术栈

前言

将图片以多级目录的形式导出。

实现

从服务端获取到图片数据后,对数据进行处理。得到下面格式：

js 复制代码

<div @click="exportImage">导出</div>

function exportImage() {
   //从服务端获取图片
  ProjectService.projectBasicInformationByProjectId('2ddQ5JcXNcX').then((res) => {
    let list = res.fileList;
    let opts = {
      zipName: '照片',
      subDirectory: [
        {
          fileName: '种植规划',
          pics: [
            {
              url: list[0].url,
              name: '种植规划1.jpg'
            },
            {
              url: list[1].url,
              name: '种植规划2.jpg'
            },
          ]
        },
      ]
    }
    exportImagesByZip(opts)
  });

}

js 复制代码

import JSZip from "jszip";
import { saveAs } from 'file-saver';
import { useMessage } from "naive-ui";
import { buildUrl } from "~/src/config";

export async function exportImagesByZip(opts) {
  const message = useMessage();
  let { subDirectory, zipName } = Object.assign({
    subDirectory: [],
    zipName: '照片',
  }, opts)
  if (subDirectory.length == 0) {
    message.warning('暂无数据')
    return;
  }
  const promises = [];
  const zip = new JSZip();
  //创建一级目录的压缩包
  const folder = zip.folder(`${zipName}`);
  //创建下级目录
  await subDirectory.forEach(item => {
    let subFolder = folder.folder(`${item.fileName}`);
    //生成镇下的文件
    if (item.pics.length == 0) return;
    item.pics.forEach(item => {
    const promise = new Promise(async (resolver, reject) => {
      let blob = await getImgBlobByUrl(buildUrl(item.url))
      subFolder.file(item.name, blob);
      resolver();
    })
    promises.push(promise);
    })
  })
  Promise.all(promises).then(() => {
    zip.generateAsync({ type: "blob" }).then(function (content) {
      saveAs(content, `${zipName}.zip`); // 下载压缩包
    });
  })
}

async function getImgBlobByUrl(url) {
  try {
    const response = await fetch(url);
    console.log(response);
     // 使用fetch请求图片
    const blob = await response.blob(); // 将响应转换为Blob对象
    return blob;
  } catch (error) {
    console.error('图片转换为Blob失败', error);
  }
}