Spring Boot + 微信小程序实现文件上传与下载功能详解

简介

本文将介绍如何通过微信小程序和 Spring Boot 实现文件上传和下载的功能。其中，文件上传使用到了微信小程序的 wx.uploadFile 方法，文件下载使用到了 ResponseEntity<Resource> 和 ByteArrayResource。

项目准备

1. Spring Boot 项目的创建和配置
2. 微信小程序的 AppID 和 Secret

代码示例中使用了 Maven 作为项目依赖管理工具，如果您使用 Gradle，可以自行转换。

文件上传

1. 后端 Java 代码

1.1. Controller

在 Controller 中添加文件上传的接口方法。

@RestController
public class FileUploadController {
    private static final Logger logger = LoggerFactory.getLogger(FileUploadController.class);

    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        try {
            String fileName = file.getOriginalFilename();
            InputStream inputStream = file.getInputStream();
            // 处理文件上传操作
            return "success";
        } catch (IOException e) {
            logger.error("Failed to upload file. Error message: {}", e.getMessage());
            return "fail";
        }
    }
}

注意上面代码中的 @PostMapping 注解和 @RequestParam 注解，它们分别用于指定接口的请求类型和请求参数。

1.2. 配置 MultipartConfigElement

在 Spring Boot 项目启动类中添加 MultipartConfigElement 配置。

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Bean
    public MultipartConfigElement multipartConfigElement() {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        // 文件最大值
        factory.setMaxFileSize(DataSize.parse("50MB"));
        // 请求最大值
        factory.setMaxRequestSize(DataSize.parse("100MB"));
        return factory.createMultipartConfig();
    }
}

2. 微信小程序前端代码

2.1. 上传文件到后端

 wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      const tempFilePaths = res.tempFilePaths[0]
      wx.uploadFile({
        url: 'https://your.domain.com/file/upload',
        filePath: tempFilePaths,
        name: 'file',
        success (res){
          console.log(res.data)
          wx.showToast({
            title: '上传成功',
          })
        },
        fail(res){
           console.log(res.data)
           wx.showToast({
              title: '上传失败',
              icon: 'none'
           })
        }
      })
    }
  })

注意上方代码中需要将 your.domain.com 更换为自己的后端接口地址。在 wx.uploadFile 方法中，可以指定文件上传时的参数，例如 filePath、name 等等。

文件下载

1. 后端 Java 代码

1.1. Controller

在 Controller 中添加文件下载接口的方法。

@RestController
public class FileDownloadController {
    private static final Logger logger = LoggerFactory.getLogger(FileDownloadController.class);

    @GetMapping("/download")
    public ResponseEntity<Resource> downloadFile() {
        ByteArrayResource resource = null;
        // 处理文件下载操作
        HttpHeaders headers = new HttpHeaders();
        // 设置文件名
        headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);
        return ResponseEntity.ok()
                .headers(headers)
                .body(resource);
    }
}

注意上面代码中的 @GetMapping 注解用于指定接口的请求类型。

1.2. 文件下载的具体实现

 private ByteArrayResource downloadFile(String fileName) {
        try {
            File file = new File("your file path/" + fileName);
            FileInputStream fileInputStream = new FileInputStream(file);
            byte[] bytes = new byte[(int) file.length()];
            fileInputStream.read(bytes);
            return new ByteArrayResource(bytes);
        } catch (IOException e) {
            logger.error("Failed to download file. Error message: {}", e.getMessage());
            return null;
        }
    }

其中，fileName 参数是从前端传递过来的文件名，需要在 Content-Disposition 头部中进行设置。

2. 微信小程序前端代码

2.1. 下载文件并打开

 wx.downloadFile({
    url: 'https://your.domain.com/file/download?fileName=' + fileName,
    success (res) {
        console.log('downloadFile success, res is', res)
        wx.openDocument({
            filePath: res.tempFilePath,
            success(res) {
                console.log('打开文档成功')
            }
        })
    },
    fail (res) {
        console.log('downloadFile fail, res is', res)
    }
})  

注意这里的文件下载链接需要替换为自己的后端接口地址。在 wx.downloadFile 方法中，可以指定文件下载时的参数，例如 fileName 等等。然后在下载完毕后，使用 wx.openDocument 方法打开该文档。

总结

通过整个过程的介绍，相信您已经掌握了在 Spring Boot 中实现文件上传和下载的方法同时使用微信小程序进行文件上传和下载。

示例1：Spring Boot 文件上传示例

示例2：微信小程序实现文件上传及下载示例