使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示

环境配置

准备环境

使用软件

图片上传

图片删除

图片显示

所有代码均为参考，每个人的方法不一样，效果不一样，该代码仅供参考，大佬们别嫌弃

环境配置 jdk1.8 maven 3.6.1 mysql 8.1

软件为 idea 2020.01 vsCode

前台需要的 vue elementUi

npm 安装 npm i element-ui -S

后台需要的 spring boot 框架

废话不多说了 开搞吧

上效果图

页面上传用的是element UI的upload 组件

html的代码

<el-upload
            action="http://localhost:8088/upload"
            class="upload-demo"
            drag
            list-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;
@Data
public 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()) {//存在就删了，返回1
                logger.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图片名称

把图片传入后台请求中，然后一个读取输入流的操作就可以实现读取本地磁盘的图片，并转换成网络请求的格式

参考代码 实现图片上传的 link.

实现图片回显的 link.

本人菜鸡一个 也就一年的开发经验，大佬们勿喷 ，主要当初踩了好多坑，特意记一下，有错误的欢迎加我QQ提醒我，及时改正，避免误人子弟第一次写文章，不好勿怪