naive UI 的upload组件自定义手动上传图片的base64位

<template><n-upload ref="uploadRef" action="#" :default-upload="false" :custom-request="myUpload"><n-button>点击选择文件</n-button></n-upload><n-button @click="submitUpload"> 上传到服务器</n-button><img :src="newImg" width="200" />
</template>
<script lang="ts" setup>import { ref } from "vue";import { UpladImage, IImgBase } from "~/service/api/upLoad";import { UploadInst, UploadCustomRequestOptions } from "naive-ui";const uploadRef = ref<UploadInst | null>(null);const newImg = ref<string | undefined>();
// 自定义上传图像的方法覆盖默认方法const myUpload = ({ file }: UploadCustomRequestOptions) => {// 读取图片文件let reader = new FileReader();reader.readAsDataURL(file.file);let imgBase = {} as IImgBase;// 读取图片是异步方法，成功读取后会执行里面的内容reader.onload = function (e) {imgBase.imgBase64 = e.target?.result?.split(",")[1]; // 这就是个普通字符串// 后端接口UpladImage(imgBase).then((data) => {// 后端返回的是base64位数据，需要按下面格式显示newImg.value = "data:image/png;base64," + data.data;});};};// 点击按钮后上传到服务器的方法const submitUpload = () => {uploadRef.value!.submit();};
</script>

网上发现还是element plus的资料比较多，其实这些组件都大同小异，记录一下方便以后使用。