图片转码(vue3)

项目要实现一个上传图片的功能，后端需要base64的格式。使用图片转base64格式，再发给后端，后端只需将转码结果存入数据库即可，前端调用接口获取到base64数据转码后的数据。再写入img src 标签即可。

HTML部分

<el-form-item label="头像" prop="iconUrl">
            <el-upload
              ref="upload"
              class="upload-demo"
              action=""
              :limit="1"
              :on-exceed="handleExceed"
              :auto-upload="false"
              list-type="picture"
              :file-list="fileList"
              :on-change="handleOnChange"
              :on-remove="handelOnRemove"
            >
              <template #trigger>
                <el-button type="primary">选择头像</el-button>
              </template>
            </el-upload>
          </el-form-item>

逻辑部分

/**上传----------------------------start */
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { genFileId } from 'element-plus';
const fileList = ref([]);
const fileType = ref(['png', 'jpg', 'jpeg']);
const upload = ref<any>();
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};

//图片验证
const handleOnChange = async (file: any) => {
  //选择图片验证
  if (!beforeAvatarUpload(file.raw)) {
    proxy?.$modal.msgError(`文件格式不正确, 请上传${fileType.value.join('/')}图片格式文件!`);
    upload.value!.clearFiles();
    return false;
  }
  form.value.iconUrl = await beforeUpload(file.raw);
};

// 上传之前的验证
const beforeAvatarUpload = (file: any) => {
  let isImg = false;
  if (fileType.value.length) {
    let fileExtension = '';
    if (file.name.lastIndexOf('.') > -1) {
      fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
    }
    isImg = fileType.value.some((type: any) => {
      if (file.type.indexOf(type) > -1) return true;
      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
      return false;
    });
  } else {
    isImg = file.type.indexOf('image') > -1;
  }
  return isImg;
  // if (!isImg) {
  //   proxy?.$modal.msgError(`文件格式不正确, 请上传${fileType.value.join('/')}图片格式文件!`);
  //   return false;
  // }
};

// 上传图片删除回调
const handelOnRemove = (file: any) => {
  fileList.value = [];
  form.value.iconUrl = '';
};

// 将文件流转为base64数据
const beforeUpload = (file: File) => {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      const base64Data = (reader.result as string).split(',')[1]; // 去掉前缀
      resolve(base64Data); // 返回不带前缀的 Base64 字符串
    };
    reader.onerror = (error) => {
      reject(error);
    };
  });
};

// 将 Base64 数据转换为 Blob 对象
function base64ToBlob(base64: string): Blob {
  const byteStr = atob(base64);
  const u8Arr = new Uint8Array(byteStr.length);
  for (let i = 0; i < byteStr.length; i++) {
    u8Arr[i] = byteStr.charCodeAt(i);
  }
  return new Blob([u8Arr]);
}

// 将 Blob 对象转换为 URL
const Base64ToUrl = (baseStr: any) => {
  const blob = base64ToBlob(baseStr);
  const url = URL.createObjectURL(blob);
  return url;
};
/**上传----------------------------end */

实现

 <el-table-column prop="" :label="$t('modelManager.iconUrl')">
            <template #default="scope">
              <img v-if="scope.row.iconUrl" :src="Base64ToUrl(scope.row.iconUrl)" style="width: 40px; height: 40px" alt="" />
              <img v-else src="../../../assets/images/ai_models.png" style="width: 40px; height: 40px" alt="" />
            </template>
 </el-table-column>

编辑时的操作

  fileList.value = [
      {
        name: '',
        url: Base64ToUrl(form.value.iconUrl) // 如果 iconUrl 为空，则使用默认路径
      }
    ];