前端上传图片并用Java存到数据库中

2024-01-02 约 654 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=135347976

前端上传图片并用Java存到数据库中

1.首先在数据库创建LONGBLOB字段

2.实体接收类为byte[]

前端上传图片代码

<form id="touxiangshangchuan" action="http://127.0.0.1/user/posts" target="frameName"    enctype="multipart/form-data" method="post">
		<input type="file" name="file" value="修改头像">
		<input class="btn" type="submit" id="anxia" value="上传" onclick="Excea()">
</form>
  <!-- iframename和form的名称相同可以防止提交文件上传后自动跳转 -->
<iframe style="display: none;" frameborder="0" name="frameName"></iframe>

<script>
function Excea(){
layer.msg('头像修改成功', {
icon: 1,
time: 1600//
}, function(){
location.reload(true)
}); 

微信小程序端上传如下

 shangchuan(){
var that =this
wx.chooseImage({
count: 1, // 一次只能选择一张图片
sourceType: ['album'], // 从相册选择
success: function(res) {
// 将图片上传到服务器
wx.uploadFile({
url: app.globalData.user_http+"/user/posts/"+that.data.user_id, // 上传的服务器地址
filePath: res.tempFilePaths[0],
name:'files',
success: function(res) {
// 上传成功，做一些处理
}
})
}
})
},

springboot 需要打开取消默认文件限制

spring:

# swagger 不兼容配置

mvc:
pathmatch:
matching-strategy: ant_path_matcher
datasource:
druid:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/dianqi?serverTimezone=UTC
username: root
password: 123456 #接收文件限制-1 为不指定大小
servlet:
multipart:
max-file-size: -1
max-request-size: -1
server:
port: 80 #打开 mybatis 控制台输出
mybatis:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

java 中接收传输的文件

@PostMapping(value = "/posts")
public Map<String, Object> addImg(StandardMultipartHttpServletRequest request,
MultipartFile file, HttpSession session) {
Map<String, Object> result = new HashMap<>();
try {
byte[] data;
data = file.getBytes();
User user = (User) session.getAttribute("user");
userService.insertOne(data, user.getId());
} catch (Exception e) {
e.printStackTrace();
}
result.put("message", "上传成功");
return result;
}

Server 层代码

 public void insertOne(byte[] data, Integer user_id) {
userMapper.insert_touxiang(data, user_id);
}

Mapper 层代码

 void insert_touxiang(@Param("data") byte[] data, @Param("user_id") Integer user_id);

//对应映射文件
<update id="insert_touxiang">
UPDATE user
SET touxiang = #{data, jdbcType=BLOB}
where id =#{user_id}
</update>

前端回显用户头像

controller 层

 @GetMapping(value = "/getImgById2")
public Result getImgById22(HttpSession session,
HttpServletResponse response) {
User user = (User) session.getAttribute("user");
Integer id = user.getId();
User data = userService.select_touxiang(id);
String base64Str = Base64.getEncoder().encodeToString(data.getTouxiang());
response.setContentType("image/jpeg");
response.setCharacterEncoding("UTF-8");
String zhuanhuan = "data:image/png;base64," + base64Str;
return Result.success(zhuanhuan);
}

Service 层

 public User select_touxiang(Integer id) {

        return userMapper.select_id(id);
    }

Mapper层

    @Select("select * from user where id = #{niuma}")
    User select_id(Integer id);

前端获取头像直接插入img标签即可

转换后为base64位后端已经默认加入，也可自行在前端配置在src属性

"data:image/png;base64,"+要放置的base64位图片

目录

前端上传图片并用Java存到数据库中

前端上传图片并用Java存到数据库中