wangeditor修改图片大小

Question

wangeditor上传照片时，怎么设置超过1m的图片自动压缩并上啊，看了文档
应该是在这里设置。但是这个return感觉是个摆设的，一直调用不了

  onBeforeUpload(file: File) {
    // TS 语法
    // onBeforeUpload(file) {    // JS 语法
    // file 选中的文件，格式如 { key: file }
    return file

    // 可以 return
    // 1. return file 或者 new 一个 file ，接下来将上传
    // 2. return false ，不上传这个 file
  },

这段是我自己写的，

 // onBeforeUpload(file:File) {
      //   console.log('File object:', file); // 调试信息
      //   console.log('文件对象类型:', typeof file); // 调试信息
      //   console.log('文件名:', file.name); // 调试信息
      //   console.log('文件大小:', file.size / 1024 / 1024 + 'MB'); // 调试信息
      //   console.log('文件类型:', file.type); // 调试信息
      //
      //     // 动态提取文件数据
      //     let fileData;
      //     if (!(file instanceof Blob)) {
      //       console.warn('文件对象不是 Blob 类型，尝试转换:', file); // 调试信息
      //
      //       const fileKeys = Object.keys(file);
      //       if (fileKeys.length === 0) {
      //         console.error('文件对象为空:', file); // 调试信息
      //         return reject(new Error('文件对象为空'));
      //       }
      //
      //       // 假设键名是动态生成的，提取第一个键对应的值
      //       const fileKey = fileKeys[0];
      //       fileData = file[fileKey];
      //       if (!fileData) {
      //         console.error('无法提取文件数据:', file); // 调试信息
      //         return reject(new Error('无法提取文件数据'));
      //       }
      //
      //       try {
      //         // 创建 Blob 对象
      //         file = new Blob([fileData.data], {type: fileData.type || 'image/jpeg'});
      //         console.log('转换后的 Blob 对象:', file); // 调试信息
      //
      //         // 验证文件大小是否为0
      //         if (file.size === 0) {
      //           console.error('转换后的 Blob 对象大小为0:', file); // 调试信息
      //           return reject(new Error('转换后的 Blob 对象大小为0'));
      //         }
      //         // 确保文件对象具有 name 属性
      //         if (!file.name) {
      //           file = new File([fileData.data], fileData.name || 'default.jpg', {type: fileData.type || 'image/jpeg'});
      //           console.log('添加 name 属性后的 Blob 对象:', file); // 调试信息
      //         }
      //       } catch (error) {
      //         console.error('文件对象转换为 Blob 类型失败:', error); // 调试信息
      //         return reject(new Error('文件对象转换为 Blob 类型失败'));
      //       }
      //     } else {
      //       fileData = file;
      //     }
      //
      //     if (!file.type.startsWith('image/')) {
      //       console.error('文件类型不是图片类型:', file.type); // 调试信息
      //       return reject(new Error('文件类型不是图片类型'));
      //     }
      //     console.log('上传文件:', file); // 调试信息
      //     console.log('大小:', file.size / 1024 / 1024 + 'MB'); // 调试信息
      //     console.log('类型:', file.type); // 调试信息
      //     console.log('文件名:', file.name); // 调试信息
      //
      //   const isLt1M = file.size / 1024 / 1024 < 1; // 判断文件大小是否小于 1MB
      //   if (isLt1M) {
      //     console.log('文件大小小于1MB，直接上传:', file); // 调试信息
      //     return file;
      //   }
      //
      //   console.log('上传文件:', file); // 调试信息
      //   console.log('大小:', file.size / 1024 / 1024 + 'MB'); // 调试信息
      //   console.log('类型:', file.type); // 调试信息
      //   console.log('文件名:', file.name); // 调试信息
      //
      //
      //
      // },

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

首先，如果你想实现在上传过程中对大于1M的图片进行自动压缩并上传的功能，你需要集成一些额外的库来帮助你处理图片压缩。WangEditor 自身并不提供图片压缩的功能，但你可以通过集成其他库（如 compress-image 或 tiny-compress 等）来实现这个功能。以下是一个简单的流程描述和代码示例：

步骤概述：

1. 在 onBeforeUpload 方法中，检测上传的图片大小。
2. 如果图片大小超过 1M，则进行压缩处理。
3. 压缩后的图片再返回给 WangEditor 进行上传。

代码示例：

你需要先安装一个图片压缩的库，例如 compress-image:

npm install compress-image --save

然后在你的代码中集成这个库：

import { Compressor } from 'compress-image'; // 引入压缩库

// WangEditor 的配置部分...
onBeforeUpload(file: File) {
  // 判断文件大小是否超过 1MB
  const isOver1MB = file.size / 1024 / 1024 > 1;
  if (isOver1MB) {
    // 使用 compress-image 库进行压缩处理
    const compressor = new Compressor(file, {
      quality: 0.5, // 设置压缩质量，根据需要调整
      maxWidthOrHeight: 800 // 设置压缩后的最大尺寸（宽或高），根据需要调整
    });
    compressor.compress((compressedFile) => {
      // 压缩完成后的回调，将压缩后的文件返回给 WangEditor 进行上传
      this.uploadFile(compressedFile); // 这里假设你有一个 uploadFile 方法来处理文件上传
    });
    return false; // 阻止直接上传原文件，直到压缩完成
  } else {
    // 文件大小小于 1MB，直接上传
    return file;
  }
}

注意：这个示例中的代码需要你根据实际情况进行调整和完善，例如 uploadFile 方法需要你自己实现或者集成 WangEditor 的上传功能。此外，你可能还需要处理压缩过程中的错误和异常。此外，不同的压缩库可能有不同的API和配置选项，你需要根据所选的库来调整代码。