@keyblade/one-travel

一码游SDK

一、工具类

1.oneTravelImageCheckAndTransform

import { oneTravelImageCheckAndTransform } from '@keyblade/one-travel'

/**
 * 一码游-图片检测及转换
 * @param {File | Blob} data - 文件数据
 * @param {String} fileName - 文件名称
 * @param {Object} [options] - 可选项
 * @param {Number} [options.imageMaxSize] - 图片最大值(单位M，主要用于错误提示)
 * @param {String} [options.imageAllowedType] - 图片允许的后缀类型(小写，如: png、jpg)
 * @param {Number} [options.imageMinWidth] - 图片最小宽度
 * @param {Number} [options.imageMinWidth] - 图片最小高度
 * @param {Number} [options.imageMaxWidth] - 图片最大宽度
 * @param {Number} [options.imageMaxHeight] - 图片最大高度
 */
export async function oneTravelImageCheckAndTransform(
  data: File | Blob,
  fileName: string,
  options?: {
    imageMaxSize?: number;
    imageAllowedType?: string[];
    // imageAllowedMineType?: string[]
    imageMinWidth?: number;
    imageMinHeight?: number;
    imageMaxWidth?: number;
    imageMaxHeight?: number;
  }
): Promise<{
  /** 是否成功 */
  success: boolean;
  /** 最终文件（有可能被转换） */
  file?: File | Blob;
  /** 是否被转换 */
  hasTransform?: boolean;
  /** 失败 */
  error?: {
    size?: boolean;
    format?: boolean;
    transform?: boolean;
    pixel?: boolean;
  },
  /** 错误消息 */
  errorMessage?: string;
}> {}

2.oneTravelImageCompressor

import { oneTravelImageCompressor } from '@keyblade/one-travel'

/**
 * 一码游-图片压缩
 * @param {File | Blob} data - File 或 Blob
 * @param {Object} options - 可选项
 * @param {Number} options.maxSize - 超过多少进行压缩(单位byte)
 * @param {Number} options.size - 压缩到多少M以内(单位byte)
 * @param {String[]} options.excludeAllowedTypes - 哪些类型不需要压缩(['image/gif'])
 */
export async function oneTravelImageCompressor(
  data: File | Blob,
  options?: {
    maxSize?: number;
    size?: number;
    excludeAllowedTypes?: string[]
  }
): Promise<{
  // 文件
  file: File | Blob;
  // 是否成功
  success: boolean;
  // 错误消息
  errorMessage?: string;
}>{}

3.oneTravelImgPondBeforeAddFile

/**
 * 一码游-拦截ImgPondBefore方法，对图片进行校验及转换
 * @param {Object} imgPondIns - ImgPond组件实例
 * @param {Object} [options] - 可选项
 * @param {Function} [options.onStart] - 校验及转换开始
 * @param {Function} [options.onSuccess] - 校验及转换成功
 * @param {Function} [options.onError] - 校验及转换失败
 */
export async function oneTravelImgPondBeforeAddFile(imgPondIns: any, options?: {
  onStart?: () => void,
  onSuccess?: () => void,
  onError?: (message: string) => void;
}) {}

使用步骤

1).绑定ref

<ImgPond
  ref="uploadImageImgPondRef"
/>

2).调用

import { oneTravelImgPondBeforeAddFile } from '@keyblade/one-travel'

const uploadImageImgPondRef = ref()
watch(() => uploadImageImgPondRef.value, () => {
  if (uploadImageImgPondRef.value) {
    let loadingIns: ElLoadingComponent
    oneTravelImgPondBeforeAddFile(uploadImageImgPondRef.value, {
      onStart: () => {
        loadingIns = Loading.service({text: '加载中...', fullscreen: true, customClass: 'tinymce-loading' })
      },
      onSuccess: () => {
        loadingIns?.close()
      },
      onError: (message) => {
        loadingIns?.close()
        Message.error(message)
      }
    })
  }
}, { immediate: true })