使用base64通用文件上传

编写一个上传文件的组件 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 = res
          drawer.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;
        //在保存汉字时使用拼音，汉字可能不兼容，例如ios
        name = PinyinUtil.getPinyin(name, "");
        FileUtil.writeBytes(bytes,uploadPath+name);
        return uploadDomain+"/images/"+name;
    }
}

效果：