Java实例：Vue前端与Java后端实现大文件异步上传下载功能

<!-- Vue组件 -->
<template>
  <div>
    <input type="file" @change="handleFileSelect" />
    <div v-if="uploadProgress > 0">
      上传进度: {{ uploadProgress }}%
      <progress :value="uploadProgress" max="100"></progress>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadProgress: 0,
      selectedFile: null,
    };
  },
  methods: {
    handleFileSelect(event) {
      this.selectedFile = event.target.files[0];

      let formData = new FormData();
      formData.append('file', this.selectedFile);

      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        }
      })
      .then(response => {
        console.log('File uploaded successfully:', response.data);
        // 清除上传进度并重置文件选择
        this.uploadProgress = 0;
        this.selectedFile = null;
      })
      .catch(error => {
        console.error('Error uploading file:', error);
        this.uploadProgress = 0;
      });
    },
  },
};
</script>

// Vue组件内方法
async handleFileUpload(file) {
  const formData = new FormData();
  formData.append('file', file); // 'file' 是从<input type="file">元素获取的文件对象

  const config = {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: progressEvent => {
      this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    }
  };

  try {
    const response = await axios.post('/api/upload', formData, config);
    console.log(response.data); // 处理后端返回的信息
  } catch (error) {
    console.error(error);
  }
}

import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.http.ResponseEntity;

@RestController
public class FileController {

    @PostMapping("/api/upload")
    public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return ResponseEntity.badRequest().body("Failed to upload, no file content found.");
        }

        // 获取文件名及扩展名
        String originalFilename = file.getOriginalFilename();

        // 将文件保存到指定路径，这里仅为示例，生产环境中需要考虑磁盘空间、文件命名策略等问题
        try {
            Path path = Paths.get(UPLOADED_FOLDER_PATH + originalFilename);
            Files.write(path, file.getBytes());
            return ResponseEntity.ok("File uploaded successfully");
        } catch (IOException e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
                               .body("Failed to upload the file: " + e.getMessage());
        }
    }
}

import org.springframework.core.io.Resource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.servlet.mvc.method.annotation.StreamingResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

@GetMapping("/api/download/{filename}")
public ResponseEntity<StreamingResponseBody> downloadFile(@PathVariable String filename) throws IOException {
    // 这里假设已知文件存放的实际路径
    File file = new File(DOWNLOAD_FOLDER_PATH + filename);

    if (!file.exists()) {
        return ResponseEntity.notFound().build();
    }

    StreamingResponseBody stream = outputStream -> {
        FileInputStream fis = new FileInputStream(file);
        byte[] buffer = new byte[4096];
        int n;
        while ((n = fis.read(buffer)) != -1) {
            outputStream.write(buffer, 0, n);
        }
        fis.close();
    };

    HttpHeaders headers = new HttpHeaders();
    headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + filename + "\"");

    return ResponseEntity.ok()
                         .headers(headers)
                         .contentType(MediaType.APPLICATION_OCTET_STREAM)
                         .body(stream);
}