Springboot——文件的上传与下载(reggie)_百度小程序

您的位置：上海毫米网络优化公司 > 小程序 > 百度小程序 >

一、文件上传——upload

1.1 介绍

将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程

文件上传时，对页面的form表单有如下要求：

method="post" 采用post方式提交数据
encttype=""multipart/form-data" 采用multipart格式上传文件

type="file" 使用input的file空间上传

Springboot——文件的上传与下载(reggie),第1张

服务端接收客户端页面上传的文件时，通常会使用Apache的两个组件：

commons-fileupload

commons-io （对文件的操作本质上还是对流的操作）

Spring框架在sprin-web包中对文件上传进行了封装，大大简化了服务端代码，我们只需要在Controller方法中声明一个MultipartFile类型的参数即可接收上传的文件

1.2 前端代码实现

使用的element-ui组件进行实现，这段代码的编写既有上传，也有下载，其中:src就是下载图片

action="/common/upload" 代表controller层的请求路径

Springboot——文件的上传与下载(reggie),第3张

1.3 后端代码实现

我们可以先发一个请求查看一下MultipartFile对象里面包括什么

Springboot——文件的上传与下载(reggie),第4张

我们仔细看发现了一个存储路径，也就是说当前传过来的文件被存储在了一个临时的位置(临时目录)，我们要做的就是把这个文件存储到一个指定的位置。如果不转存的话，当我们此次请求结束后，这个文件就不存在了。

Springboot——文件的上传与下载(reggie),第5张

我们在请求成功后返回了图片的文件名+后缀名，目的就是为了下载图片的时候将图片名称传过去然后找到对应的图片

/**
 * 文件的上传和下载
 */
@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {
    @Value("${reggie.path}")
    private String basePath;
    /**
     * 文件上传
     *
     * @param file 是一个临时文件，需要转存的指定的位置，否则本次请求后此文件就会消失
     * @return
     */
    @PostMapping("/upload")
    public R upload(MultipartFile file) throws IOException {
        log.info("上传文件：{}", file.toString());
//      1.拼接转存的位置
//      获取文件的原始名
        String originalFilename = file.getOriginalFilename();   //abc.jpg
//      文件名后缀
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
//       也可以使用UUID生成文件名，防止文件名称重复导致覆盖原文件
        String filename = UUID.randomUUID().toString();   //缺少后缀
        String url= basePath + filename+suffix;
//      2. 判断转存的目录是否存在
//         File既可以代表一个目录，又可以代表一个文件
        File dir = new File(basePath);
//         判断当前目录是否存在
        if (!dir.exists()){
//          不存在的时候进行创建
            dir.mkdirs();
        }
//      转存临时文件到指定的位置  参数是一个URL路径
        file.transferTo(new File(url));
        return R.success(filename+suffix);
    }
}

二、文件下载——download

2.1 介绍

指将文件从服务器传输到本地计算机的过程。

通过浏览器进行文件下载，通常有两种表现形式：

以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录

直接在浏览器中打开

通过浏览器进行文件下载，本质上就是服务端将文件以流的形式写会浏览器的过程。

2.2 前端代码编写

Springboot——文件的上传与下载(reggie),第7张

Springboot——文件的上传与下载(reggie),第8张

2.3 后端代码编写

  /**
     * 文件下载
     *
     * @param name     图片名
     * @param response 图片要通过响应流获得
     */
    @GetMapping("/download")
    public void download(String name, HttpServletResponse response) throws IOException {
//      0. 设置文件格式
        response.setContentType("image/jpeg");
//      1. 输入流，通过输入流读取文件内容
        FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));
//      2. response输出流，将文件写回浏览器
        ServletOutputStream outputStream = response.getOutputStream();
        int len = 0;
        byte[] bytes = new byte[1024];
        while ((len = fileInputStream.read(bytes)) != -1) {
            outputStream.write(bytes, 0, len);
            outputStream.flush();
        }
//      3.关闭流
        outputStream.close();
        fileInputStream.close();
    }

三、前端总代码




  
  
  
  文件上传

四、应用场景

4.1 数据库表

4.1.1 菜品表

Springboot——文件的上传与下载(reggie),第10张

Springboot——文件的上传与下载(reggie),第11张

4.1.2 菜品口味表

Springboot——文件的上传与下载(reggie),第12张

Springboot——文件的上传与下载(reggie),第13张

4.1.3 菜品分类及菜品套餐表

Springboot——文件的上传与下载(reggie),第14张

Springboot——文件的上传与下载(reggie),第15张

4.2 实体类

4.2.1 菜品实体类

/**
 菜品
 */
@Data
public class Dish implements Serializable {
    private static final long serialVersionUID = 1L;
    private Long id;
    //菜品名称
    private String name;
    //菜品分类id
    private Long categoryId;
    //菜品价格
    private BigDecimal price;
    //商品码
    private String code;
    //图片
    private String image;
    //描述信息
    private String description;
    //0 停售 1 起售
    private Integer status;
    //顺序
    private Integer sort;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;
    //是否删除
    private Integer isDeleted;
}

4.2.2 菜品口味实体类

@Data
public class DishFlavor implements Serializable {
    private static final long serialVersionUID = 1L;
    private Long id;
    //菜品id
    private Long dishId;
    //口味名称
    private String name;
    //口味数据list
    private String value;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;
    //是否删除
    private Integer isDeleted;
}

4.2.3 菜品分类及菜品套餐实体类

@Data
public class Category implements Serializable {
    private static final long serialVersionUID = 1L;
    private Long id;
    //类型 1 菜品分类 2 套餐分类
    private Integer type;
    //分类名称
    private String name;
    //顺序
    @TableField("sort")
    private Integer sort;
    //创建时间
    @TableField(value = "create_time",fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    //更新时间
    @TableField(value = "update_time",fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
    //创建人
    @TableField(value = "create_user",fill = FieldFill.INSERT)
    private Long createUser;
    //修改人
    @TableField(value = "update_user",fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;
    //是否删除
//    @TableField(value = "is_deleted")
//    private Integer isDeleted;
}

4.3 新增菜品

说明：

1. 页面发送ajax请求，请求服务端获取菜品分类数据并展示到下拉框中

2. 页面发送请求进行图片上传，请求服务端将图片保存到服务器

3. 页面发送请求进行图片下载，将上传的图片进行回显

4. 点击保存按钮，发送ajax请求将菜品相关信息保存到数据库

重要点：价格是以分为单位！！！！！！！！防止精度缺失！！！！！！！

4.3.1 菜品分类下拉框

Springboot——文件的上传与下载(reggie),第16张

不是说看见对象就用@RequestBody注解，而是看前端是否提交过来的是json数据，后端用对象来接收才用@RequestBody注解

前端提交过来的得是json格式的数据才用@RequestBody注解

因为这个是前端页面直接通过请求地址提交过来的type，所以不需要使用@RequestBody注解

那我们这里为什么要使用一个Category对象来进行接收呢？

防止前端以后再传入其他参数，所以我们直接用整个Category进行接收

    /**
     * @param category 这个地方我们没有选择声明一个String的type接收，而是选择一个实体类，
     *                 原因是防止以后前端再转过来其他的参数，我们还要再修改这个地方
     *                 总的来说就是通用性更强
     * @return
     */
    @GetMapping("/list")
    public R> list(Category category) {
        log.info("获取菜品分类的下拉列表");
        LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(category.getType() != null, Category::getType, category.getType());
        queryWrapper.orderByAsc(Category::getSort).orderByDesc(Category::getUpdateTime);
        List list = categoryService.list(queryWrapper);
        return R.success(list);
    }

4.3.2 封装DTO

DTO：全称Data Transfer Object ,即数据传输对象，一般用于展示层与服务层之间的数据传输。

我们可以自己看一下这些请求参数，我们并没有一个类能完整的接收这些参数，所以我们要创建一个类来进行接收

Springboot——文件的上传与下载(reggie),第17张

@Data
public class DishDto extends Dish {
    private List flavors = new ArrayList<>();
    private String categoryName;
    private Integer copies;
}

子类不能继承父类的私有属性，但是如果子类中公有的方法影响到了父类私有属性，那么私有属性是能够被子类使用的。

4.3.3 添加菜品

因为同时操作两张表，开启事务可以保证两张表，同时操作成功或者失败，不然第一个表操作成功后如果出现异常，第二张会操作失败，这样数据就出问题了

    @Override
    @Transactional  // 操作多张表，加一个事物的处理 ，记得在启动类添加一个EnableTransactionManagement
    public void saveWithFlavor(DishDto dishDto) {
//     保存菜品的基本信息到菜品表dish
        this.save(dishDto);
//     保存菜品口味数据到菜品口味表dish_flavor
//          但是我们刚刚分析的时候知识封装了name与value， id与dishId没有封装
        Long dishId = dishDto.getId();
        List dishFlavorList = dishDto.getFlavors();
        dishFlavorList = dishFlavorList.stream().map((item) -> {
            item.setDishId(dishId);
            return item;
        }).collect(Collectors.toList());
//      传入集合，批量保存
        dishFlavorService.saveBatch(dishFlavorList);
    }

4.4 菜品分页查询

与之前分页查询的不同就是加入了图片下载

1. 页面发送ajax请求，将分页查询参数提交到服务端，获取分页数据

2. 页面发送请求，请求服务端进行图片下载，用于图片展示

总共两次请求

4.4.1 构建DTO

注意看下图中标红的地方，我们需要的是一个菜品分类的名称，而不是一个id，所以我们现有的Dish实体类无法直接返回到前端，要进行处理

我们之前创建的DishDTO就很符合要求

Springboot——文件的上传与下载(reggie),第18张

4.4.2 菜品分页查询

这个地方有两个点，一个是数据的Copy，另一个是数据Copy要忽略records，具体原因代码中有详细解释

    @GetMapping("/page")
    public R> page(int page, int pageSize, String name) {
        Page pageInfo = new Page<>(page, pageSize);
        LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper();
        queryWrapper.like(Strings.isNotEmpty(name),Dish::getName,name);
        queryWrapper.orderByDesc(Dish::getUpdateTime);
         dishService.page(pageInfo, queryWrapper);
        Page dishDtoPage = new Page<>();
//      进行对象的拷贝  如果再加入第三个参数，就是在拷贝时要忽略的参数，比如我们这里就要忽略 "records"参数
//         这个地方我们为什么要忽略呢？
//           不忽略的话，我们下面运行会出现     com.reggie_take_out.entity.Dish cannot be cast to com.reggie_take_out.dto.DishDto
        BeanUtils.copyProperties(pageInfo,dishDtoPage,"records");
//      将菜品的id改为菜品名
        List records = pageInfo.getRecords();
        List dishDtoList = records.stream().map((item) -> {
            DishDto dishDto = new DishDto();
            BeanUtils.copyProperties(item,dishDto);
            Long categoryId = item.getCategoryId();
            Category category = categoryService.getById(categoryId);
            dishDto.setCategoryName(category.getName());
            return dishDto;
        }).collect(Collectors.toList());
        dishDtoPage.setRecords(dishDtoList);
        return R.success(dishDtoPage);
    }

Springboot——文件的上传与下载(reggie),第19张

4.5 修改菜品功能

1. 页面发送ajax请求，获取分类数据，用于分类下拉框数据展示 (之前已经实现 )

2. 页面发送ajax请求，根据id查询当前菜品的信息，用于菜品信息回显

3. 页面发送请求，请求服务端进行图片下载，用于图片回显(之前已经实现)

4. 点击保存按钮，页面发送ajax请求，将修改后的菜品相关数据以JSON形式提交到服务端

4.5.1 数据回显操作

在方框内的数据都需要回显，明显Dish实体类不够用，所以不能返回Dish实体类。

依旧使用我们之前的DishDto类。新增功能时的请求体的接收类与数据回显操作时返回数据的类是同一个。

Springboot——文件的上传与下载(reggie),第20张

@Data
public class DishDto extends Dish {
    private List flavors = new ArrayList<>();
    private String categoryName;
    private Integer copies;
}

    @Override
    public DishDto getByIdWithFlavor(Long id) {
        //备用
        DishDto dishDto = new DishDto();
        //查询菜品基本信息，从dish表查询
        Dish dish = this.getById(id);
        BeanUtils.copyProperties(dish,dishDto);
        //查询当前菜品对应的口味信息，从dish_flavor表查询
        LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(DishFlavor::getDishId,dish.getId());
        List dishFlavorList = dishFlavorService.list(queryWrapper);
        dishDto.setFlavors(dishFlavorList);
        return dishDto;
    }

4.5.2 修改菜品信息

参照新增菜品进行修改即可

    @Override
    public void updateWithFlavor(DishDto dishDto) {
//       1.更新菜品表基本信息   因为DishDTO是Dish的子类，所以传进去是没有问题的
         this.updateById(dishDto);
//       2. 更新口味表基本信息
         LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
         queryWrapper.eq(DishFlavor::getDishId,dishDto.getId());
         dishFlavorService.remove(queryWrapper);
//           有个简便方式，将当前菜品的口味数据删除，然后将此次修改后的直接添加即可
//        从dto中获取口味表
        List flavors = dishDto.getFlavors();
//         因为从前端传过来的时候只有name与value ，所以我们需要再改变一下flavors
        flavors = flavors.stream().map((item) -> {
            item.setDishId(dishDto.getId());
            return item;
        }).collect(Collectors.toList());
//      传入集合，批量保存
        dishFlavorService.saveBatch(flavors);
    }

五、新增套餐功能

5.1 数据库对应表

5.1.1 套餐表 setmeal

Springboot——文件的上传与下载(reggie),第21张

Springboot——文件的上传与下载(reggie),第22张

5.1.2 套餐菜品关系表

Springboot——文件的上传与下载(reggie),第23张

Springboot——文件的上传与下载(reggie),第24张

5.2 实体类

5.2.1 套餐实体类

/**
 * 套餐
 */
@Data
public class Setmeal implements Serializable {
    private static final long serialVersionUID = 1L;
    private Long id;
    //分类id
    private Long categoryId;
    //套餐名称
    private String name;
    //套餐价格
    private BigDecimal price;
    //状态 0:停用 1:启用
    private Integer status;
    //编码
    private String code;
    //描述信息
    private String description;
    //图片
    private String image;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;
    //是否删除
//    private Integer isDeleted;
}

5.2.2 套餐菜品关系类

/**
 * 套餐菜品关系
 */
@Data
public class SetmealDish implements Serializable {
    private static final long serialVersionUID = 1L;
    private Long id;
    //套餐id
    private Long setmealId;
    //菜品id
    private Long dishId;
    //菜品名称 （冗余字段）
    private String name;
    //菜品原价
    private BigDecimal price;
    //份数
    private Integer copies;
    //排序
    private Integer sort;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;
    //是否删除
    private Integer isDeleted;
}

5.3 新增菜品

梳理前后端交互的过程：

1. 页面发送ajax请求，请求服务端获取套餐分类数据并展示到下拉框中

2. 页面发送ajax请求，请求服务端获取菜品分类数据并展示到添加菜品窗口中

3. 页面发送ajax请求，请求服务端，根据菜品分类查询对应的菜品数据并展示到添加菜品窗口中

4. 页面发送请求图片上传

5. 页面发送请求图片下载

6. 保存按钮发送ajax请求，将套餐相关数据以JSON形式提交到服务端

Springboot——文件的上传与下载(reggie),第25张

Springboot——文件的上传与下载(reggie),第26张

5.3.1 根据分类查询菜品

    /**
     * 根据条件查询对应的菜品数据
     * 
     * 传入一个Dish对象 比传入一个 categoryId通用性更好
     *
     * @param dish
     * @return
     */
    @GetMapping("/list")
    public R> list(Dish dish) {
        LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(dish.getCategoryId() != null, Dish::getCategoryId, dish.getCategoryId())
//               起售
                .eq(Dish::getStatus, 1)
                .orderByAsc(Dish::getSort).orderByDesc(Dish::getUpdateTime);
        List dishList = dishService.list(queryWrapper);
        return R.success(dishList);
    }

Springboot——文件的上传与下载(reggie),第27张

5.3.2 封装DTO

@Data
public class SetmealDto extends Setmeal {
    private List setmealDishes;
    private String categoryName;
}

5.3.3 新增套餐操作

    /**
     *  新增套餐，同时需要保存套餐和菜品的关联关系
     * @param setmealDto
     */
    @Override
    @Transactional
    public void saveWithDish(SetmealDto setmealDto) {
//     保存套餐的基本信息，操作setmeal,执行insert操作
        this.save(setmealDto);
//     保存套餐和菜品的关联信息，操作setmeal_dish,执行insert操作
//        还是和之前一样，这个里面存的只有dishId，setmealId是没有的，所以我们要加上
        List setmealDishList = setmealDto.getSetmealDishes();
        List collect = setmealDishList.stream().map((item) -> {
            item.setSetmealId(setmealDto.getId());
            return item;
        }).collect(Collectors.toList());
        boolean b = setmealDishService.saveBatch(collect);
    }

5.4 分页查询

 @GetMapping("/page")
    public R page(int page,int pageSize,String name){
        Page pageInfo = new Page<>(page,pageSize);
        LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.like(name !=null,Setmeal::getName,name)
                .orderByDesc(Setmeal::getUpdateTime);
        setmealService.page(pageInfo,queryWrapper);
//       对线拷贝
        Page setmealDtoPage = new Page<>();
        BeanUtils.copyProperties(pageInfo,setmealDtoPage,"records");
        List records = pageInfo.getRecords();
        List collect = records.stream().map((item) -> {
            SetmealDto setmealDto = new SetmealDto();
            BeanUtils.copyProperties(item, setmealDto);
            setmealDto.setCategoryName(item.getName());
            return setmealDto;
        }).collect(Collectors.toList());
        setmealDtoPage.setRecords(collect);
        return  R.success(setmealDtoPage);
    }

这个地方的套餐分类得益于我们在数据库中的冗余字段，不必再让我们查询数据库

Springboot——文件的上传与下载(reggie),第28张

5.5 删除套餐与批量删除套餐

    /**
     * 删除套餐，同时删除套餐和菜品的关联数据
     *   只有停售的套餐才能够删除
     * @param ids
     */
    @Override
    @Transactional
    public void removeWithDish(List ids) {
//      查询套餐的状态，看是否可以删除
        LambdaQueryWrapper lambdaQueryWrapper = new LambdaQueryWrapper();
        lambdaQueryWrapper.in(Setmeal::getId,ids)
//              说明在售卖中
                .eq(Setmeal::getStatus,1);
        int count = this.count(lambdaQueryWrapper);
//      不能删除抛出异常
        if (count>0){
            throw  new CustomException("正在售卖中，不能删除");
        }
//      可以删除，先删除套餐表中的数据
        this.removeByIds(ids);
//      删除关系表中的数据
        LambdaQueryWrapper  queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.in(SetmealDish::getSetmealId,ids);
        setmealDishService.remove(queryWrapper);
    }

上一篇：《新手》web前端（axios）后端（java-springboot）对接简解

下一篇：使用nacos配置中心管理配置文件时，springcloud程序启动报错，无法找到对应的配置文件（加载到了错误的配置文件）