Java项目实战跟练day9——菜品管理页面之文件上传下载

Java项目实战跟练day9——springboot + mybatis plus开发

菜品管理

1.文件上传下载

客户端上传：
文件上传，也称为upload，是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。
文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圆都用到了文件上传功能。文件上传时，对页面的form表单有如下要求:
method="post”–>采用post方式提交数据；
enctype=“multipart/form-data”–>采用multipart格式上传文件；
type=“file”–>使用input的file控件上传。
目前一些前端组件库也提供了相应的上传组件，但是底层原理还是基于form表单的文件上传，如ElementUI中提供的upload上传组件。
服务端接收：
服务端要接收客户端页面上传的文件，通常使用Apache的两个组件:
commons-fileupload
commons-io
Spring框架在spring-web包中对文件上传进行了封装，大大简化了服务端代码，我们只需要在Controler的方法中声明一个MultipartFile类型的参数即可接收上传的文件。
文件下载：
文件下载，称为download，是指将文件从服务器传输到本地计算机的过程。
通过浏览器进行文件下载，通常有两种表现形式:
1.以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录。
2.直接在浏览器中打开。
通过浏览器进行文件下载，本质上就是服务端将文件以流的形式写回浏览器的过程。

2.项目中的文件上传实践

前端运用upload 组件

        <el-upload class="avatar-uploader"
                action="/common/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeUpload"
                ref="upload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar"></img>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

前端模拟发送请求：





后端代码
新建controller类，CommonController .java

/**
 * ClassName:CommonController
 * Description:
 *文件上传和下载
 * @Author:Hyt
 * @Create:2024/2/1 14:09
 * @Version 1.0
 */
@Controller
@RestController
@Slf4j
@RequestMapping("/common")
public class CommonController {
    @PostMapping("/upload")
    //file是一个临时文件，需要存储在指定位置，否则本次请求结束后临时文件会删除
    public R<String> upload(MultipartFile file){
        log.info(file.toString());
        return null;
    }
}

后端代码改进step1：
通过transferTo方法将临时文件转存到指定位置

   public R<String> upload(MultipartFile file){
        log.info(file.toString());
        //将临时文件转存到指定位置
        try {
            file.transferTo(new File("D:\\Hello.jpg"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

后端代码改进step2：
动态配置存储路径
项目配置文件application.yml中添加文件存储路径：

reggie:
  path: E:\download\00 MyBatis\received-picture\

CommonController .java配置动态路径：

/**
 * ClassName:CommonController
 * Description:
 *文件上传和下载
 * @Author:Hyt
 * @Create:2024/2/1 14:09
 * @Version 1.0
 */
@Controller
@RestController
@Slf4j
@RequestMapping("/common")
public class CommonController {
    //文件存储路径
    @Value("${reggie.path}")
    private String basePath;

    @PostMapping("/upload")
    //file是一个临时文件，需要存储在指定位置，否则本次请求结束后临时文件会删除
    public R<String> upload(MultipartFile file){
        log.info(file.toString());
        //将临时文件转存到指定位置
        try {
            file.transferTo(new File(basePath+"Hello.jpg"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

后端代码改进step3：
配置动态文件名

/**
 * ClassName:CommonController
 * Description:
 *文件上传和下载
 * @Author:Hyt
 * @Create:2024/2/1 14:09
 * @Version 1.0
 */
@Controller
@RestController
@Slf4j
@RequestMapping("/common")
public class CommonController {
    //文件存储路径
    @Value("${reggie.path}")
    private String basePath;

    @PostMapping("/upload")
    //file是一个临时文件，需要存储在指定位置，否则本次请求结束后临时文件会删除
    public R<String> upload(MultipartFile file){
        log.info(file.toString());
        //将临时文件转存到指定位置

        //获取文件原始名字
        String originalFilename = file.getOriginalFilename();

        //截取文件后缀
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

        //使用UUID重新生成文件名，防止因文件名重复造成文件覆盖
        //随机生成的文件名和原后缀名拼接成新名字
        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.项目中的文件下载实践

前端代码，通过上传请求返回的filename组合以下请求：

        methods: {
          handleAvatarSuccess (response, file, fileList) {
              this.imageUrl = `/common/download?name=${response.data}`
          },

后端代码

    /**
     * 文件下载
     * @param name
     * @param response
     */
    @GetMapping("/download")
    public void download(String name, HttpServletResponse response){
        try {
            //输入流，读取文件内容
            FileInputStream fileInputStream = new FileInputStream(new File(basePath+name));
            //输出流，将文件写回浏览器，进行展示
            ServletOutputStream outputStream = response.getOutputStream();
            //
            response.setContentType("image/jpeg");
            //一读一写
            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 (Exception e) {
            e.printStackTrace();
        }
    }

前端展示