抠丁客
Uppy 压缩器
@uppy/compressor 插件在上传前优化图片（JPEG、PNG 和其他浏览器支持的格式），可以节省高达 60% 的大小（大约 10 张图片 18MB）。它使用了 Compressor.js 库。
我应该在什么时候使用它？
当你的用户可能上传图片，尤其是可能在移动设备上，并且节省数据和更快的上传很重要时，你可以使用这个插件。
安装
npm
npm install @uppy/compressoryarn
yarn add @uppy/compressorCDN
警告
此捆绑包包含了大部分Uppy插件，因此不建议在生产环境中使用此方法，因为尽管您可能仅仅用到其中一小部分插件，但用户却需要下载全部插件。
然而，这对于加速您的开发环境非常有帮助，所以在起步阶段，请放心使用它来提升开发速度。<!-- 1. Add CSS to `<head>` --> <link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet"> <!-- 2. Initialize --> <div id="uppy"></div> <script type="module"> import { Uppy, Compressor } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs" const uppy = new Uppy() uppy.use(Compressor, { // Options }) </script>
使用
import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import Compressor from "@uppy/compressor";
new Uppy()
.use(Dashboard, { inline: true, target: "#dashboard" })
.use(Compressor);
不需要用户的任何操作 —— Uppy 会自动优化图片，显示一个带有节省字节数的 Informer 消息，然后像平常一样开始上传。
API
选项
提示
你也可以在这里传递任何 Compressor.js 选项。
id
此插件的唯一标识符（ string，默认：'Compressor' ）。
quality
传递给 Compressor.js 的输出图像质量（ number，默认：0.6 ）。
它必须是一个介于 0 和 1 之间的数字。谨慎使用 1，因为它可能会使输出图像的大小变大。在大多数情况下，最好使用默认值。
注意
此选项仅适用于
image/jpeg和image/webp图像。
limit
并行压缩的图片数量（ number，默认：10 ）。
除非你遇到性能问题，否则通常不需要更改此设置。
locale
export default {
strings: {
// 显示在状态栏
compressingImages: "正在压缩图片...",
compressedX: "已通过压缩图片节省 %{size}",
},
};
事件
compressor:complete
当所有文件都压缩完成后，会触发此事件。你可以使用它来实现副作用或自定义 UI 通知。