更新记录

1.0.0（2025-04-08） 下载此版本

• 文件压缩/解压：支持ZIP、RAR、7Z等常见压缩格式，可自定义压缩级别
• 图片格式转换：支持JPEG、PNG、WebP、GIF等格式互转，WebP自动兼容处理
• 大文件分片上传：支持大文件分片上传，可自定义分片大小和并发数
• 断点续传：支持断点续传，网络中断后可继续上传
• 文件记录管理：自动记录处理过的文件，支持查看、分享和删除

平台兼容性

uni-app

其他

XL-File-Tool 文件处理工具箱组件

在线演示地址：在线demo 一个功能强大的跨平台文件处理工具箱组件，支持文件压缩/解压、图片格式转换、大文件分片上传/断点续传等功能。

功能特点

• 文件压缩/解压：支持ZIP、RAR、7Z等常见压缩格式，可自定义压缩级别
• 图片格式转换：支持JPEG、PNG、WebP、GIF等格式互转，WebP自动兼容处理
• 大文件分片上传：支持大文件分片上传，可自定义分片大小和并发数
• 断点续传：支持断点续传，网络中断后可继续上传
• 文件记录管理：自动记录处理过的文件，支持查看、分享和删除

平台特性

H5 平台特性

在 H5 环境下，组件具有以下特性：

1. 文件选择：

   • 使用浏览器原生的文件选择器
   • 支持单文件和多文件选择
   • 支持文件类型过滤

2. 文件预览：

   • 图片文件可以直接在浏览器中预览
   • 支持图片缩放和旋转
   • 支持图片格式转换预览

3. 文件下载：

   • 压缩文件自动触发下载
   • 支持自定义下载文件名
   • 支持大文件分片下载

4. 文件上传：

   • 支持拖拽上传
   • 支持多文件同时上传
   • 支持上传进度显示
   • 支持断点续传

5. 限制说明：

   • 无法直接访问本地文件系统
   • 无法直接打开本地文件
   • 文件操作需要通过用户交互触发
   • 部分高级功能可能受限

App 平台特性

在 App 环境下，组件具有以下特性：

1. 文件系统访问：

   • 可以直接访问本地文件系统
   • 支持文件读写操作
   • 支持文件预览和打开

2. 文件处理：

   • 支持文件压缩和解压
   • 支持图片格式转换
   • 支持文件分享和导出

3. 系统集成：

   • 可以使用系统默认应用打开文件
   • 支持文件分享到其他应用
   • 支持系统文件选择器

安装使用

基本用法

<template>
  <xl-file-tool ref="fileToolRef" />
</template>

<script setup>
import { ref } from 'vue';

const fileToolRef = ref(null);
</script>

组件属性

组件事件

组件方法

方法调用示例

// 压缩文件
const result = await fileToolRef.value.compressFile('/path/to/file.txt', {
  format: 'ZIP',
  level: 6
});

// 解压文件
const result = await fileToolRef.value.extractFile('/path/to/file.zip', {
  format: 'ZIP'
});

// 转换图片
const result = await fileToolRef.value.convertImage('/path/to/image.png', {
  format: 'WebP',
  quality: 80,
  autoCompatible: true
});

// 上传文件
const result = await fileToolRef.value.uploadFile('/path/to/file.txt', {
  chunkSize: 5 * 1024 * 1024, // 5MB
  concurrentUploads: 3,
  resumeUpload: true
});

文件记录管理

组件会自动记录处理过的文件，包括：

1. 压缩/解压记录：显示压缩或解压后的文件信息，包括文件名、类型、大小和日期
2. 图片转换记录：显示转换后的图片信息，包括缩略图、文件名、格式、大小和日期
3. 上传记录：显示上传后的文件信息，包括文件名、URL、大小和日期

每个记录都支持以下操作：

• 打开：打开文件查看
• 分享：分享文件给其他应用
• 删除：从记录中删除文件
• 复制链接：复制上传文件的URL（仅上传记录）

注意事项

1. 文件处理功能在不同平台上的支持程度可能有所不同
2. H5端部分功能可能受限，建议在App端使用完整功能
3. 文件记录仅在当前会话中有效，刷新页面后记录会清空

常见问题

Q: 为什么H5端部分功能不可用？

A: 由于浏览器安全限制，H5端无法直接访问本地文件系统，因此部分功能受限。

Q: 如何实现断点续传？

A: 组件内部已经实现了断点续传功能，只需要在上传选项中设置resumeUpload: true即可。断点续传会自动记录上传进度，网络中断后可继续上传。

Q: 如何处理大文件？

A: 组件支持大文件分片上传，可以通过chunkSize选项设置分片大小，通过concurrentUploads选项设置并发上传数，提高上传效率。

更新日志

v1.0.0 (2023-10-01)

• 初始版本发布
• 支持文件压缩/解压
• 支持图片格式转换
• 支持大文件分片上传/断点续传
• 添加文件记录管理功能