---

開發前端接口

首先這個前端的文件上傳組件使用了,前端組件
首先這個接口不是一般的接口,這個接口可以提取出來,之后那里使用了,就直接放到哪里

所以這是一個萬能文件上傳接口

寫完之后選擇 頭像組件

在圖庫中添加組件

寫前端組件之后,寫了前端的組件
就是使用了一個組件,然后里面有套用了一個文件上傳的組件進行使用

    <!-- 圖庫： {{ modelValue}} --><el-avatar :size="60" :src="modelValue" @click="drawer = true" style="cursor: pointer;"><img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" /></el-avatar><el-drawer v-model="drawer" title="圖片上傳" size="600px"><el-upload class="avatar-uploader" :show-file-list="false" :on-change="onChange"><el-icon class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-drawer>

      <el-upload class="avatar-uploader" :show-file-list="false" :on-change="onChange"><el-icon class="avatar-uploader-icon"><Plus /></el-icon></el-upload>

文件上傳組件代碼中使用展示列表,還有事件

那么總結一下

在業務端邏輯層

首先寫controller層

直接屬于post請求,使用@RequestBody接收參數

然后接收到參數后調用servic層處理參數
,因為前端傳遞過來兩個參數
一個是string類型的name
一個是string類型的base64編碼

接受到參數之后再service層
首先處理一下name

使用hutool工具類的idutil使用快速生成uuid+name

使用hutool工具類中的拼音工具,可以將中文轉為拼音

然后處理base64
首先拿到base64編碼

使用strutil工具類去切割字符串
拿到編碼的部分,然后

編碼切分

拿到后面的編碼部分

這樣可以上傳任意類型的圖片
之后使用直接在前端引入就行

那么name處理之后
再處理編碼部分

然后處理之后就可以寫入字節了

因為切割字符串的時候是將字符串安裝字符節分后,然后再轉化為byte,然后再寫入到文件
然后再返回給前端

然后返回數據

經過service處理后返回給controller層
然后controller層接收到地址
然后返回給前端

這樣可以對接云使用接口