vue+elementui+springboot实现文件模板上传下载

你可以使用Vue.js和Element UI来实现前端界面，使用Spring Boot来处理后端逻辑来实现文件模板的上传和下载功能。

首先，你可以创建一个Vue组件来处理文件上传和下载的界面。可以使用Element UI中的Upload组件来实现文件上传功能，使用Button组件来实现文件下载功能。在上传组件中，你可以设置上传的文件类型和大小限制，并在上传成功后获取到文件的URL或者其他信息。

接下来，在后端使用Spring Boot来处理上传和下载的逻辑。你可以创建一个Controller来处理文件上传和下载的请求。在文件上传的方法中，你可以使用MultipartFile来接收上传的文件，并将其保存到服务器上的某个目录中。在文件下载的方法中，你可以根据传入的文件名或者其他标识，从服务器上读取相应的文件，并将其以流的形式返回给前端。

以下是一个简单的示例代码：

前端（Vue.js + Element UI）：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <el-button type="primary">点击上传</el-button>
    </el-upload>
    <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(response) {
      // 处理上传成功后的逻辑
      console.log(response);
    },
    beforeUpload(file) {
      // 设置上传文件的类型和大小限制
      const fileType = file.type;
      const fileSize = file.size / 1024 / 1024; // MB
      const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']; // 允许的文件类型
      const maxFileSize = 10; // 允许的最大文件大小，单位：MB

      if (!allowedTypes.includes(fileType)) {
        this.$message.error('只能上传pdf、doc或docx格式的文件');
        return false;
      }

      if (fileSize > maxFileSize) {
        this.$message.error(`文件大小超过了${maxFileSize}MB`);
        return false;
      }

      return true;
    },
    downloadTemplate() {
      // 处理下载模板的逻辑
      window.location.href = '/api/download';
    },
  },
};
</script>

后端（Spring Boot）：

@RestController
@RequestMapping("/api")
public class FileController {

  @PostMapping("/upload")
  public String uploadFile(@RequestParam("file") MultipartFile file) {
    // 处理文件上传逻辑
    // 可以将上传的文件保存到服务器上的某个目录中
    return "上传成功";
  }

  @GetMapping("/download")
  public void downloadTemplate(HttpServletResponse response) {
    // 处理文件下载逻辑
    // 根据文件名或者其他标识，从服务器上读取相应的文件，并将其以流的形式返回给前端
    String fileName = "template.docx"; // 下载的文件名
    String filePath = "/path/to/template.docx"; // 文件在服务器上的路径

    try {
      File file = new File(filePath);
      InputStream inputStream = new FileInputStream(file);

      response.setContentType("application/octet-stream");
      response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8"));

      IOUtils.copy(inputStream, response.getOutputStream());
      response.flushBuffer();
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

这是一个简单的示例，你可以根据自己的需求进行进一步的调整和优化。希望对你有帮助！