naive UI 的upload组件自定义手动上传图片的base64位-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>