瑞吉外卖day4

发表于 更新于

1 文件的上传下载

客户端：在页面上文件上传，对页面的form表单有要求

1.必须post请求

2.enctype=“multipart/form-data”

3.type=”file”（input的file控件）

举例：

image-20230313194307672

服务端：要接受客户端页面上传的文件，通常会使用apache的两个组件

  • commons-fileupload
  • commons-io

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

  • 以附件形式下载，弹出保存对话框，将文件保存到某个位置
  • 直接在浏览器打开

2 代码运用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@RestController
@Slf4j
public class CommonController {

    @Value("${reggie.path}")
    private String basePath;

    /**
     * 文件上传
     *
     * @param file
     * @return
     */
    @PostMapping("upload")
    public R<String> upload(MultipartFile file) {
        log.info(file.toString());

        //获得文件的原始名字
        String originalFilename = file.getOriginalFilename();
        //截取拓展名
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

        //拼接保存的文件名
        String fileName = UUID.randomUUID().toString()+suffix;

        File dir = new File(basePath);

        if(!dir.exists()){
            dir.mkdirs();
        }

        try {
            file.transferTo(new File(basePath + fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return R.success(fileName);
    }
}

3 文件的下载

通过流的方式写入写出图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@GetMapping("download")
public void download(String name, HttpServletResponse response) {
    try {
        //输入流，通过输入流读取文件内容
        FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));

        //输出流，通过输出流将文件写回浏览器（在浏览器展示）
        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();
        }

        fileInputStream.close();
        outputStream.close();

    } catch (IOException e) {
        e.printStackTrace();
    }
}

4 新增菜品

需求分析：

后台系统中可以管理菜品信息，再添加菜品时需要选择当前菜品的所属分类，并上传菜品图片，并在移动端按照菜品分类来展示对应的菜品信息

交互流程：

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

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

3.页面发送请求进行图片下载，浏览器预览图片

4.点击保存按钮，发送ajax请求，将菜品相关数据以json形式提交到服务端

再写save方法的时候，因为口味是集合存储的，所以我们需要DTO来解决传参问题。