交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • Java后端SSM框架图片上传功能实现方法解析

    北冥有鱼 教程大全 2020-06-28 ,,,

    一、技术概述

    (1)这个技术是做什么

    这个技术是上传图片到服务器上,并且把地址存在数据库中。前端调用的时候之间通过地址即可调用。

    (2)学习该技术的原因

    由于用户在写日记的时候也可以进行图片的上传,同时还有用户头像的上传。

    二、技术详述

    以上传用户的头像为例

    (1)接口代码

    	@RequestMapping(value = "user/profilePhoto", produces = "application/json; charset=utf-8")
    	@ResponseBody
    	public boolean imageUphold(@RequestParam("photo") MultipartFile file, Long phone) throws IOException {
    		String filePath = ducumentBase;// 保存图片的路径
    		// String filePath = "/image";//保存图片的路径
    		// 获取原始图片的拓展名
    		String originalFilename = file.getOriginalFilename();
    		System.out.println("originalFilename: " + originalFilename);
    		// 新的文件名字
    		String newFileName = UUID.randomUUID() + originalFilename;
    		// 封装上传文件位置的全路径
    		filePath += "/" + phone;
    		System.out.println("filePath: " + filePath);
    		File targetFile = new File(filePath, newFileName);
    		if (!targetFile.exists()) {
    			targetFile.mkdirs();
    		}
    		// 把本地文件上传到封装上传文件位置的全路径
    		System.out.println("newFileName: " + newFileName);
    
    		System.out.println("targetFile: " + targetFile.getName());
    		System.out.println("phone: " + phone);
    		//System.out.println("afterPhone");
    		try {
    			file.transferTo(targetFile);
    		} catch (IllegalStateException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		String allPath=mappingPath + "/" + phone+ "/" + newFileName;
    		System.out.println("存储路径为"+allPath);
    		boolean result=onedayServiceImpl.updProfilePhoto(allPath, phone);//存在数据库中,其中allPath的数据库类型为varchar(1000)
    		return result;
    	}

    其中的ducumentBase以及mappingPath

    @Value("${ducument.base}")
    private String ducumentBase;
    @Value("${mapping.path}")
    private String mappingPath;

    为全局变量

    配置文件

    ducument.base = D://oneday_uphold
    mapping.path = /images

    (2)解释

    用MultipartFile来接收图片的二进制码,然后使用路径+图片名+随机数保存图片。

    (3)测试jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>image/uphold</title>
    </head>
    <body>
      <form action="user/profilePhoto" method="post" enctype="multipart/form-data">
        图片:<input type="file" name="photo">
        电话:<input type="text" name="phone" value="13225942005">
        <input type="submit" value="提交">
      </form>
    </body>
    </html>

    (4)显示图片

    <img id="images" alt="头像" src="/mappingPath/路径">

    三、技术使用中遇到的问题和解决过程

    (1)无法保存:

    查看是否已进行服务器的设置,以Eclipse为例

    Servers->Modules->Add External Web Modules 进行路径的设置

    (2)无法访问接口:

    查看是否使用表单形式访问:method="post" enctype="multipart/form-data"

    同时上传的名字是否与接口相对应

    四、总结

    本来进行图片的上传的时候考虑过直接上传二进制到数据库用blob进行保存,但觉得这样不好,遂改为保存图片地址的方式进行上传。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。


    广而告之:
    热门推荐:
    javascript的函数、创建对象、封装、属性和方法、继承

    一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真的是一样的吗,大家看看下面的例子 复制代码 代码如下:···

    SEO高手分享外链技巧之如何发布更有效的外链

    虽然很多人都在说外链已经没市场了,不需要再关注了。但是,真正有经验的SEO站长还是不会漏下这一块,因为外链有时候确实能给我们的网站带来意想不到的好处。不过,发外链并不是简单的群发或者是在一些垃圾站上大量发,而是有目的有计划有质量的发,这样的外链才有效,这样的···

    社区(php&&mysql)五

    function post2() {     global $sid,$aid,$PHP_SELF;     global $banner,$body,$poster,$email,$type,$CHAR_GB;          if(strlen($banner)==0 || strlen($body)==0 || strl···

    浅谈JavaScript函数的四种存在形态

    函数的四种存在形态: 1.函数形态 2.方法形态 将函数赋值给某一个对象的成员,那么就称为方法 3.构造器形态 4.上下文形态 1.函数形态: var foo = function() { alert(this); //this是window }; 2.方法形态:   o = {}; o.foo = foo; //将函数foo赋值给对···

    MySQL WorkBench管理操作MySQL教程

    一 MySQL Workbench MySQL Workbench提供DBAs和developers一个集成工具环境: 1)数据库设计和建模 2)SQL开发(取代原来的MySQL Query Browser) 3)数据库管理(取代原来的MySQL Administrator) 二 MySQL Workbench 下载和安装 1)下载 下载: MySQL Workbench&···

    详解Angular-cli生成组件修改css成less或sass的实例

    详解Angular-cli生成组件修改css成less或sass的实例 使用cli命令生成组件: ng generate component 组件名 生成出来的组件文件有:html / ts / css / spec.ts 问题我是一个less重度患者怎么可能再去写css呢。 于是我就在想使用cli生成组件的时候能直接生成出来的是less文件而···

    浅谈react.js 之 批量添加与删除功能

    最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件。 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这···

    分享javascript、jquery实用代码段

    本文实例为大家简单分享javascript、jquery实用demo,供大家参考,具体内容如下 javascript判断H5页面离开 function onbeforeunloadFn(){ console.log('离开页面'); //...code } function showOnbeforeunload(flags){ if(flags){ document.body.onbeforeunload = onbefor···

    MySQL 表数据的导入导出操作示例

    本文实例讲述了MySQL 表数据的导入导出操作。分享给大家供大家参考,具体如下: 数据导出 1.  使用 SELECT ...INTO OUTFILE ...命令来导出数据,具体语法如下。 mysql> SELECT * FROM tablename INTO OUTFILE 'target_file' [option]; 其中 option 参数可以是以···

    JavaScript中判断整字类型最简洁的实现方法

    我们知道JavaScript提供了typeof运算符,因此最容易想到的是用typeof来判断是否是number类型。 复制代码 代码如下: function isNumber(obj) {     return typeof obj === 'number' } 这个函数对于整数和浮点数都没有问题,但对于NaN值也返回true这让人感到不爽···