antdv上传图片前压缩图片

在使用 Ant Design 的上传组件时，如果需要在上传前对图片进行压缩，可以使用一些 JavaScript 库来实现。一个常用的库是 compressorjs，它可以在客户端对图片进行压缩。

以下是一个简单的使用示例：

首先，确保你的项目中已经安装了 compressorjs 库。你可以通过 npm 安装：

yarn add compressorjs

然后，使用以下代码示例在上传前压缩图片：

<a-upload
    v-model:file-list="fileList"
    :action="getBaseUrlHTTP()+'v1/upload'"
    :headers="{
    Authorization: `Bearer ${getAccessToken()}`
  }"
    multiple
    :maxCount="9"
    list-type="picture-card"
    :before-upload="beforeUpload"
    @preview="handlePreview"
    @remove="handleRemove"
    @change="handleFileChange"
>
</a-upload>

js 部分

<script setup lang="ts">
import Compressor from 'compressorjs';

const beforeUpload = file => {
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality: 0.6,
      success(result) {
        resolve(result)
      },
      error(err) {
        console.error('Image compression error:', err)
        reject(err)
      },
    });
  })
};
<script>

上述代码中，beforeUpload 函数使用了 compressorjs 库对图片进行压缩。在 Compressor 构造函数中，你可以通过调整 quality 参数来控制压缩的质量，范围为 0 到 1。

请注意，由于压缩是在客户端进行的，可能会占用一定的客户端资源。在处理大量图片上传时，需要谨慎使用，以避免影响用户体验。