MultipartFile实现图片上传上传

MultipartFile: SpringMVC专对文件的上传开发的API

1 文件上传入门案例

/*** url地址:/file* 参数: fileImage* 返回值: 返回成功的提示信息** 知识回顾:    IO流的操作的方式  作业*  1.低级流  FileInputStreamFile/FileOutputStream*  2.缓存流  BufferedInputStream/BufferedOutputStream*  3.高级流字符流  Reader/Writer**  最大的困难:   1.API不好记.....  多*               2.代码的格式 不好理解*               3.经常性的出现不关流的失误.**  MultipartFile: SpringMVC专对文件的上传开发的API*                 默认的最大只允许上传1M的数据* @return*/@RequestMapping("/file")public String upload(MultipartFile fileImage) throws IOException {//1.获取图片的真实名称String fileName = fileImage.getOriginalFilename();//2.设定文件上传的地址  写成/更加符合Linux的语法特点 为了以后通用使用/String dir = "E:/JT_IMAGE";//3.最好对目录进行校验  判断是否存在.File dirFile = new File(dir);if(!dirFile.exists()){//如果文件不存在,则创建一个文件目录dirFile.mkdirs();}//4.实现文件上传 需要指定文件的全路径 目录路径/文件名称String filePath = dir + "/" + fileName;//5.实现文件上传操作fileImage.transferTo(new File(filePath));return "文件上传成功!!!!";}

2. 实现图片文件上传

1 页面URL分析

2 参数说明

3 页面JS分析

4 文件上传返回值分析

5 回显VO封装

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;@Data
@Accessors(chain = true)
@AllArgsConstructor
@NoArgsConstructor
public class ImageVo {//{"error":0,"url":"图片的保存路径","width":"图片的宽度","height":图片的高度}private Integer error;  //0 正常 1失败private String url;private Integer width;private Integer height;public static ImageVo fail(){return new ImageVo(1,null,null,null);}public static ImageVo success(String url,Integer width,Integer height){return new ImageVo(0, url, width, height);}
}

6 编辑FileController

 /*** 实现文件上传* 1.页面URL地址:http://localhost:8091/pic/upload?dir=image* 2.参数信息:   uploadFile* 3.返回值:     ImageVO对象*/@RequestMapping("/pic/upload")public ImageVO uploadFile(MultipartFile uploadFile){return fileService.upload(uploadFile);}

7 编辑properties配置文件

8 编辑FileService

import com.jt.vo.ImageVo;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.PropertySource;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashSet;
import java.util.Set;
import java.util.UUID;@Service
@PropertySource(value = "classpath:/properties/image.properties" ,encoding = "UTF-8")
public class FileServiceImpl implements FileService{//方式1：利用集合实现数据的校验private static Set<String> typeSet=new HashSet<>();@Value("${image.localDirPath}")private String localDirPath; //="E:/JT_IMAGE";@Value("${image.urlPath}")private String urlPath;  //="http://image.jt.com";static {//静态代码块   为属性赋值，初始化实例对象typeSet.add(".jpg");typeSet.add(".png");typeSet.add(".gif");}/*** 知识点：*     1、代码的安全性*     2多问一下自己，如果什么该怎么办** 文件上传的业务说明：* 1、校验文件上传是否为图片的类型？？jpg/png/gif...* 2、为了防止恶意的程序，需要校验是否为图片的文件   木马.exe.jpg* 3、为了保证检索的速度，需要将图片，分目录存储* 4、如何防止我们文件重名* @param uploadFile* @return*//*@Overridepublic ImageVo upload(MultipartFile uploadFile) {//1、校验是否为图片类型      (BUG 一般条件下不出问题，当传入特定数据时，可能出现问题)//1.1 获取用户上传文件的类型   a.jpgString fileName = uploadFile.getOriginalFilename();//为了防止大小写问题 导致的校验异常bugfileName = fileName.toLowerCase();//1.2 获取下标int index = fileName.lastIndexOf(".");//1.3 如果下标为-1没有后缀，提前结束if (index==-1){//没有后缀，程序应该提前结束return ImageVo.fail();}String fileType = fileName.substring(index);//1.3校验是否为图片类型if (!typeSet.contains(fileType)){//图片类型不符return ImageVo.fail();}return null;}*//*** 知识点：*     1、代码的安全性*     2多问一下自己，如果什么该怎么办** 文件上传的业务说明：* 1、校验文件上传是否为图片的类型？？jpg/png/gif...* 2、为了防止恶意的程序，需要校验是否为图片的文件   木马.exe.jpg* 3、为了保证检索的速度，需要将图片，分目录存储* 4、如何防止我们文件重名* @param uploadFile* @return*/@Overridepublic ImageVo upload(MultipartFile uploadFile) {//1、校验文件类型  abc.jpgString fileName = uploadFile.getOriginalFilename().toLowerCase();//1.1 利用正则表达式校验是否满足图片格式要求if (!fileName.matches("^.+\\.(jpg|png|gif)$")){return ImageVo.fail();}//2、校验是否为图片对象try{BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());int width=bufferedImage.getWidth();int height=bufferedImage.getHeight();if (width == 0||height==0){return ImageVo.fail();}//3、实现分目录存储//3.1 动态生成hashcode编码 之后2位一隔 生成多级目录，// 目录层积太深，笛卡尔较大，遍历不便//3.2 可以动态的以当前的时间为存储的目录结构String dateDirPath=new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());//文件的存储目录  E：/JT_IMAGE/2021/01/26/String fileDirPath=localDirPath+dateDirPath;File fileDir=new File(fileDirPath);if (!fileDir.exists()){  //判断文件目录是否存在fileDir.mkdirs();   //创建目录}//4、利用UUID动态生成图片名称   uuid.jpgString uuid =UUID.randomUUID().toString().replace("-", "");//abc.jpgString fileType=fileName.substring(fileName.lastIndexOf("."));String newFileName=uuid+fileType;//5、实现文件上传File realFile=new File(fileDirPath+newFileName);uploadFile.transferTo(realFile);//6、编辑图片的虚拟路径//6.1 磁盘地址 E:\JT_IMAGE\2021\01\26\1b0e435933ac42cabec53b20ffbcfe90.png//6.2 虚拟地址 http://image.jt.com\2021\01\26\1b0e435933ac42cabec53b20ffbcfe90.pngString url=urlPath+dateDirPath+newFileName;return ImageVo.success(url, width, height);}catch (IOException e){e.printStackTrace();return ImageVo.fail();}}
}

9.页面效果展现
1).上传图片完成之后,显示域名地址如下

2).切换磁盘地址检查路径是否正确

MultipartFile实现图片上传上传相关推荐

java实现七牛云图片文件的上传
java实现七牛云图片文件的上传七牛云:https://portal.qiniu.com/create#resource 首先需要去注册一个账号实现实名认证之后打开七牛云的我们需要先创建一个储存 ...
H-ui.admin v3.1多图片预览上传的问题解决
H-ui.admin v3.1多图片预览上传的问题解决这个模板的多图片上传我搞了好久,之前忙的时候都放弃了模板给的多图片上传,现在有时间研究下终于解决了,话不多说上代码. (function( $ ...
SpringBoot 搭建图片服务器 -- 支持上传下载和浏览
前言: 项目需求:做一个图片服务器,用于存放业务部门做的宣传图片:支持上传.下载和在线查看. 一.需求分解 1. 上传.下载功能比较成熟,相对好实现: 2. 在线预览,需要分为单个文件预览和多个文件预 ...
使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
基于cropper和sweetalert的简单图片/头像裁剪上传
基本功能前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像基 ...
图片裁切，上传，自动匹配颜色。
图片裁切,上传,自动匹配颜色. photoclip插件学习. https://github.com/baijunjie/PhotoClip.js是官方文档. 使用方法很简单.不过我在使用的过程中遇到几 ...
返回图片_Vue 图片压缩并上传至服务器
日常开发中经常会遇到上传图片的需求,随着手机的蓬勃发展,现在拍出来的照片分辨率越来越高,随之带来的问题就是图片占用空间越来越大,如果我们直接上传图片可能就会浪费很大一笔资源,本文主要讲解基于 Vue ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
CANVAS运用-对图片的压缩上传（仅针对移动浏览器）
最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等 ...
图片和文件上传js剖析
/** * 商户资质信息模块js * * 涉及页面组件 { * 上传组件(UploadFileComponent) * } * * * 初始化工具(init) * * @Author:Waver */ ...

MultipartFile实现图片上传上传

1 文件上传入门案例

2. 实现图片文件上传

MultipartFile实现图片上传上传相关推荐

最新文章

热门文章