使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示
环境配置准备环境使用软件图片上传图片删除图片显示所有代码均为参考，每个人的方法不一样，效果不一样，该代码仅供参考，大佬们别嫌弃环境配置 jdk1.8 maven 3.6.1 mysql 8.1软件为 idea .01 vsCode前台需要的 vue elementUinpm 安装 npm i element-ui -S后台需要的 spring boot 框架废话不多说了 开搞吧上效果图页面上传用的是element UI的upload 组件html的代码下面是方法基本所有的前台方法都是现成的不会自己研究现在开始重头戏来了建一个FileResult 的对象类来存结果一些不是必须有的 看个人需求可以自己改现在基本实现了图片上传，图片会保存在你指定的磁盘文件位置接着图片删除简单来说就是把之前存图片的本地路劲传入过来这时候就有一个尴尬的问题了 传入文件的图片怎么显示目前我只找到了俩个方法第一种 存在自己的端口里的静态资源下这样有个问题 上传的图片没法即使显示，得等静态资源刷新才能显示出来访问请求为 localhost:/8080/uploadImg/+你的图片名第二种 还是存在这里 访问方法为，先上显示图片的代码后台的这里要说一下不要把路径放上去，别人可以通过这个路径访问你的文件件，把路径存在数据库中，然后把id放上去，传入了id，在后台通过id查询文件名称，这样就安全了，上面的代码存在这个bug。不要放文件地址，不要放文件地址，重要的事情说三遍。前台的把图片传入后台请求中，然后一个读取输入流的操作就可以实现读取本地磁盘的图片，并转换成网络请求的格式参考代码 实现图片上传的 [link](/p/decd9e45f1bf).实现图片回显的 [link](/huyande123/article/details/81236348).本人菜鸡一个 也就一年的开发经验，大佬们勿喷 ，主要当初踩了好多坑，特意记一下，有错误的欢迎加我QQ提醒我，及时改正，避免误人子弟第一次写文章，不好勿怪环境配置
准备环境
使用软件
图片上传
图片删除
图片显示
所有代码均为参考，每个人的方法不一样，效果不一样，该代码仅供参考，大佬们别嫌弃
环境配置 jdk1.8 maven 3.6.1 mysql 8.1
软件为 idea .01 vsCode
前台需要的 vue elementUi
npm 安装 npm i element-ui -S
后台需要的 spring boot 框架
废话不多说了 开搞吧
上效果图
页面上传用的是element UI的upload 组件
html的代码
<el-uploadaction="http://localhost:8088/upload"class="upload-demo"draglist-type="picture":limit="1":headers = "headers"name="picture":before-upload="beforeUpload":on-success="handleSuccess":on-exceed="onExceed":on-remove="handleRemove":file-list="fileList"multiple><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload>
####接下来css的代码
下面是方法
基本所有的前台方法都是现成的不会自己研究
现在开始重头戏来了
/*** 文件上传* @param picture* @param request* @return*/@RequestMapping("/upload")public FileResult upload(@RequestParam("picture") MultipartFile picture, HttpServletRequest request) {logger.info("您已进入图片上传服务");//获取文件在服务器的储存位置String path = "G://idea//test//src//main//resources//static//uploadImg";File filePath = new File(path);logger.info("文件的保存路径：" + path);if (!filePath.exists() && !filePath.isDirectory()) {logger.info("目录不存在，创建目录:" + filePath);filePath.mkdir();}//获取原始文件名称(包含格式)String originalFileName = picture.getOriginalFilename();logger.info("原始文件名称：" + originalFileName);//获取文件类型，以最后一个`.`为标识String type = originalFileName.substring(originalFileName.lastIndexOf(".") + 1);logger.info("文件类型：" + type);//获取文件名称（不包含格式）String name = originalFileName.substring(0, originalFileName.lastIndexOf("."));String fileName = UUIDUtils.getUUID32() + name + "." + type;logger.info("新文件名称：" + fileName);//在指定路径下创建一个文件File targetFile = new File(path, fileName);logger.info("图片地址："+path+"/"+fileName);//将文件保存到服务器指定位置try {picture.transferTo(targetFile);logger.info("上传成功");//将文件在服务器的存储路径返回return new FileResult(true,fileName,path+"/"+fileName);} catch (IOException e) {logger.info("上传失败");e.printStackTrace();return new FileResult(false, "上传失败","");}}
建一个FileResult 的对象类来存结果
package com.zhizun.test.model;import lombok.Data;import java.io.Serializable;@Datapublic class FileResult implements Serializable {//判断结果private boolean success;//返回信息private String message;//文件地址private String fileAddress;private String start;public FileResult(boolean success, String message,String fileAddress) {this.success = success;this.message = message;this.fileAddress = fileAddress;}public boolean isSuccess() {return success;}}
一些不是必须有的 看个人需求可以自己改
现在基本实现了图片上传，图片会保存在你指定的磁盘文件位置
接着图片删除
@RequestMapping("/delFile")public String delFile(String path) {logger.info("进入图片删除！！");String resultInfo = null;File file = new File(path);logger.info("图片删除本地链接："+file);System.out.println(file.exists());if (file.exists()) {//文件是否存在if (file.delete()) {//存在就删了，返回1logger.info("图片删除成功");resultInfo = "1";} else {logger.info("图片删除失败");resultInfo = "0";}} else {resultInfo = "文件不存在！";}return resultInfo;}
简单来说就是把之前存图片的本地路劲传入过来
这时候就有一个尴尬的问题了 传入文件的图片怎么显示
目前我只找到了俩个方法
第一种 存在自己的端口里的静态资源下
这样有个问题 上传的图片没法即使显示，得等静态资源刷新才能显示出来
访问请求为 localhost:/8080/uploadImg/+你的图片名
第二种 还是存在这里 访问方法为，先上显示图片的代码
后台的
/*** 显示图片* getFeedBackPicture.do?picName=* @return*/@RequestMapping("/viewPhoto/{photopath}")public void getFeedBackPicture(HttpServletResponse response, @PathVariable("photopath")String photopath) throws Exception{String realPath="G://idea//test//src//main//resources//static//uploadImg/"+photopath;FileInputStream inputStream = new FileInputStream(realPath);int i = inputStream.available();//byte数组用于存放图片字节数据byte[] buff = new byte[i];inputStream.read(buff);//记得关闭输入流inputStream.close();//设置发送到客户端的响应内容类型response.setContentType("image/*");OutputStream out = response.getOutputStream();out.write(buff);//关闭响应输出流out.close();}
这里要说一下不要把路径放上去，别人可以通过这个路径访问你的文件件，把路径存在数据库中，然后把id放上去，传入了id，在后台通过id查询文件名称，这样就安全了，上面的代码存在这个bug。不要放文件地址，不要放文件地址，重要的事情说三遍。
前台的
http://localhost:8088/viewPhoto/
http://localhost:8080/viewPhoto/+t图片名称
