html5 上传本地文

这是原生Input的写法

<input
   type="file"
   accept="image/*"
   @change="handleUploaded($event,index)"
>

function handleUploaded (event:any, index:number) {
  const file = event.target.files[0]
  fileToBase64(file).then((url) => {
      imageUrl.value = url  
  })
}

/**
 * 将文件转换为base64格式的字符串，可以根据最大文件大小进行压缩
 * @param file 要转换的文件
 * @param maxSizeInKB 最大允许的文件大小（以KB为单位），默认为500KB
 * @returns 返回一个Promise，最终解析出base64格式的字符串
 */
export function fileToBase64(file: File, maxSizeInKB: number = 500): Promise<string> {
  return new Promise<string>((resolve) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = function () {
      const image = new Image();
      image.src = this.result as string;

      image.onload = function () {
        const maxSizeInBytes = maxSizeInKB * 1024;
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        let width = image.width;
        let height = image.height;

        if (image.width > image.height) {
          if (image.width > 1024) {
            width = 1024;
            height = (image.height * 1024) / image.width;
          }
        } else {
          if (image.height > 1024) {
            height = 1024;
            width = (image.width * 1024) / image.height;
          }
        }

        canvas.width = width;
        canvas.height = height;
        context.drawImage(image, 0, 0, width, height);

        let quality = 0.7; // 初始质量为0.7
        let imageData = canvas.toDataURL('image/jpeg', quality);

        // 通过不断调整质量以缩小文件大小
        while (imageData.length > maxSizeInBytes && quality > 0.1) {
          quality -= 0.1;
          imageData = canvas.toDataURL('image/jpeg', quality);
        }

        resolve(imageData);
      };
    };
  });
}