一般实现上传文件功能会单独把文件存入单独的文件服务器中，然后在数据库中存储对应的文件路径，但是往往项目开发过程中总会有一些奇奇怪怪的问题，遇到过一个需求，需要有图片保存的功能，一个上传、一个下载，但是又不给提供图片服务器，同时项目服务器也是受限制的，所以只能找到一个很奇怪的方式，把图片以Base64的方式存储在数据库中。
实现思路
1、前端使用文件上传控件
2、把需要上传的文件转给base64字符串并传入后台
3、后端接收前台传入的图片字符串，把该字符串存入数据库clob字段中
代码实现
前端
添加上传文件控件，获取图片信息，把图片转换为base64参考代码如下：
<template>
<div>
<!--文件控件，用于上传图片-->
<input type="file" id="imgInfo" @change="getFile($event)">
<!--绑定变量，上传图片后用于图片预览-->
<!-- 绑定上传图片方法,点击就请求后台存储图片 -->
<button type="button" @click="uploadImgInfo()">上传图片</button>
</div>
</template>
<script>
import { upload } from '@/api/mmyu/index.js' // 引入接口
export default {
name: 'uploadImg',
data () {
return {
base64QrCode: ''
}
},
// 2、添加自定义组件
components: {
},
// 初始化调用方法
created () {
},
methods: {
// 图片转成 base64
getFile (event) {
var that = this
// 获取文件信息
var files = document.getElementById('imgInfo').files[0]
var reader = new FileReader()
reader.onloadend = function () {
that.userPhoto = reader.result
// 把转换好的图片字符串放入 img 标签中进行预览
this.base64QrCode = reader.result
console.log(this.base64QrCode)
}
if (files) {
reader.readAsDataURL(files)
}
},
// 上传图片方法
uploadImgInfo () {
upload(this.base64QrCode).then(data => {
})
}
}
}
</script>
上传方法 uploadImgInfo 参考代码如下：
import request from '../http'
export function upload (fileInfo) {
return request({
url: '/ming/img/upload?fileInfo=' + fileInfo,
method: 'get'
})
}
由于图片一般不会很大这里使用get也是可以的，如果图片过大，或者是需要上传文件那么这里应该使用post方法
后端代码
前面使用get方法请求，后端直接拿到传过来的base64字符串，把该字符串直接存入数据库中即可，需要注意的是存入时数据库字段长度的问题，如果使用varchar类型图片过大可能会存不下，建议使用clob类型或者text类型也可。
@RequestMapping("/upload")
public String getQrCode(@RequestParam String fileInfo){
以上就是把图片转为base64字符串存入数据库的整个操作，但是不推荐把文件存入数据库中！！！！
