当前位置：首页 > news >正文

使用base64通用文件上传

news 2025/7/23 5:43:18

编写一个上传文件的组件 tuku,点击图片上传后使用FileReader异步读取文件的内容，读取完成后获得文件名和base64码，调用后端uploadApi,传入姓名和base64文件信息，后端存入nginx中，用于访问

tuku.ts组件代码：

<template><!-- 点击后触发方法修改父组件的值 --><el-avatar :size="80" src="imgmodelValue1" @click="drawer = true" style="cursor: pointer;"><img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" /></el-avatar><el-drawer v-model="drawer" title="图片上传" :with-header="false"><el-upload class="avatar-uploader" :show-file-list="false" :on-change="onChange" :auto-upload="false"><el-icon class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-drawer></template><script lang="ts" setup>import { defineModel,ref} from 'vue';
import { uploadApi } from '@/api/index.ts';const modelValue = defineModel("tukuimg1")const onChange = (uploadFile:any, uploadFiles: any)=>{let name =uploadFile.name//FileReader是浏览器提供的API，用于异步读取文件的内容let reader = new FileReader()//使用readAsDataURL方法异步读取文件内容。uploadFile.raw应该是文件对象本身reader.readAsDataURL(uploadFile.raw)//设置FileReader的onload事件处理器，当读取操作完成时，这个函数会被调用,注意这里的file参数实际上是event对象reader.onload = (file)=>{callUploadApi(name,file.target?.result)}}const callUploadApi = (name:String,base64 :any)=>{uploadApi.upload.call({name,base64}).then((res: any)=>{modelValue.value = resdrawer.value = false})}const drawer = ref(false)</script><style scoped>
.avatar-uploader .avatar {width: 100px;height: 100px;display: block;
}
</style>
<style>
.avatar-uploader .el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 100px;height: 100px;text-align: center;
}
</style>

使用组件

后端api

uploadService代码

package com.yy.service;import cn.hutool.core.codec.Base64;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.extra.pinyin.PinyinUtil;
import com.yy.dto.UploadDto;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;@Service
public class UploadService {@Value("${upload.path}")private String uploadPath;@Value("${upload.domain}")private  String uploadDomain;public String uploadAll(UploadDto uploadDto) {String name = uploadDto.getName();String base64 = uploadDto.getBase64();String[] base64Array = StrUtil.splitToArray(base64, "base64,");byte[] bytes = Base64.decode(base64Array[1]);//设置图片名称前使用唯一id,防止名字重复name = IdUtil.fastSimpleUUID()+"_"+name;//在保存汉字时使用拼音，汉字可能不兼容，例如iosname = PinyinUtil.getPinyin(name, "");FileUtil.writeBytes(bytes,uploadPath+name);return uploadDomain+"/images/"+name;}
}

效果：