头像上传-前后端分离

头像上传-前后端分离背景 表单提交 将用户的头像传递到后台 后台通过流处理 将文件写到文件服务器 本地模拟 并存入数据库效果图 前端 html 中需要引入 cookie js jquery 3 4 1 min js jquery form js divclass uicontainer id upload enctype multipart form data 表示表单有多种数据构成 既有文本 又有二进制 lt divclass uicontainer id upload

背景:表单提交,将用户的头像传递到后台,后台通过流处理,将文件写到文件服务器(本地模拟)并存入数据库

效果图:

头像上传-前后端分离

前端:

html中需要引入

  • jquery-3.4.1.min.js
  • jquery.form.js
 
  

相应的js代码:

var username=window.localStorage.getItem('username'); $('#username').val(username); //document.cookie获取到所有的cookie $('#cookies').val(document.cookie); //上传头像 $('#dataForm').ajaxForm(function (data) { if (data.code === 2000) { window.location.reload() } else { alert(data.message) } })

后端:

 @Value("${filePath}") //具体值在配置文件application.yml中 private String filePath; / * 头像上传 * @param username 指定用户 * @param file 传入的文件 * @param cookie * @return * @throws IOException */ public ResultVO uploadFile(String username, MultipartFile file, String cookie) throws IOException { //获取到文件名称 String fileName = file.getOriginalFilename(); //获取到文件全路径 String path=filePath+ File.separator+fileName; //1.将文件通过IO写到filePath(用本机模拟文件服务器),注意FileOutputStream()中必须得是具体文件 BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(path)); try { bos.write(file.getBytes()); bos.flush(); } catch (IOException e) { e.printStackTrace(); throw new IOException(ApiResponseCodeEnum.NO_USER.getMessage()); }finally { bos.close(); } //2.存入数据库中 User user=userMapper.getByUsername(username); if (user == null){ return ResultVO.fail(ApiResponseCodeEnum.NO_USER.getCode(), ApiResponseCodeEnum.NO_USER.getMessage()); } user.setImageUrl("../static/img/" +fileName); if (cookie == null){ new File(path).delete(); return ResultVO.fail(); }else { String[] cookiesArr = cookie.split(";"); //我在cookie中存的是{name:token+UUID,value:UUID} for (String temp : cookiesArr) { if (temp.contains("token")) { String[] split = temp.split("=");//前端传来的是"tokenUUID=UUID"字符串 redisUtil.set(split[1], user);//redis存的是{key:UUID,value:user} return ResultVO.success(); } } } //更新数据库 int i = userMapper.updateByPrimaryKeySelective(user); if (i == 0){ //删除文件 new File(path).delete(); return ResultVO.fail(ApiResponseCodeEnum.FAIL_UPLOAD.getCode(), ApiResponseCodeEnum.FAIL_UPLOAD.getMessage()); } return ResultVO.success(); }

其中,filePah是在yml中进行的配置,这里存在了项目的img中

filePath: F:\workspace_webstorm\shop_web\static\img

结尾:我写的不清楚的地方我们可以交流,希望对你有所帮助,也期望指出问题。共同进步~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/206095.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午4:29
下一篇 2026年3月19日 下午4:29


相关推荐

  • C# 开发上位机软件[通俗易懂]

    C# 开发上位机软件[通俗易懂]目前正进行上位机软件开发,有兴趣的朋友,可以一起参与,联系qq-19066432

    2022年5月25日
    48
  • strstr函数头文件_c++ strstr函数的实现[通俗易懂]

    strstr函数头文件_c++ strstr函数的实现[通俗易懂]函数说明:包含文件:string.h函数名:strstr函数原型:externchar*strstr(char*str1,char*str2);功能:从字符串str1中查找是否有字符串str2,如果有,从str1中的str2位置起,返回str1的指针,如果没有,返回null。返回值:返回该位置的指针,如找不到,返回空指针。#include”stdafx.h”#include#in…

    2022年6月25日
    42
  • ViewPager,ScrollView 嵌套ViewPager滑动冲突解决

    ViewPager,ScrollView 嵌套ViewPager滑动冲突解决ViewPager,ScrollView嵌套ViewPager滑动冲突解决这篇博客主要讲解一下几个问题-粗略地介绍一下View的事件分发机制-解决事件滑动冲突的思路及方法-ScrollView里面嵌套ViewPager导致的滑动冲突-ViewPager里面嵌套ViewPager导致的滑动冲突-轮播图的几种实现方式先看一下效果图ScrollView里面嵌套View

    2022年7月22日
    13
  • Java list foreach_java的foreach

    Java list foreach_java的foreach例子://使用com.google.guava包创建集合List<String>list=Lists.newArrayList(“a”,”b”,”c”,”d”);//1、正常遍历list.forEach(item->System.out.println(item));//2、根据条件遍历list.forEach…

    2026年4月13日
    8
  • 如何将excel表格导入mysql数据库_MySQL数据库

    如何将excel表格导入mysql数据库_MySQL数据库怎么把excel里的数据导入数据库中的表中打开企业管理器开要导入数数据库,在表上按右键,所务–>导入数据,弹出DTS导入/导出向导,按下一步,2、选择数据源MicrosoftExcel97-2000,文件名选择要导入的xls文件,按下一步,3、选择目的用于SQLServer的MicrosoftOLEDB提供程序,服务器选择本地(如果是本地数据库的话,如VVV…

    2026年2月9日
    6
  • gdfgd_gdaebfc

    gdfgd_gdaebfc@TOC欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器,可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计,将会带来全…

    2022年4月20日
    60

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号