Spring MultipartFile实现多文件上传攻略

// 示例代码片段
Part filePart = request.getPart("file"); // 获取上传的文件部分
String fileName = Paths.get(filePart.getSubmittedFileName()).getFileName().toString();
InputStream fileContent = filePart.getInputStream();

// 使用Spring的MultipartFile接口上传文件的简单示例
@PostMapping("/uploadFile")
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
    if (file.isEmpty()) {
        // 文件为空处理
    } else {
        // 文件不为空，处理文件上传逻辑
    }
    return "uploadStatus";
}

@PostMapping("/upload")
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
    if (!file.isEmpty()) {
        try {
            // 获取文件名
            String fileName = file.getOriginalFilename();
            // 获取文件大小
            long fileSize = file.getSize();
            // 保存文件到指定路径
            file.transferTo(new File("/path/to/save/" + fileName));
            // 文件上传成功处理逻辑...
        } catch (Exception e) {
            // 文件保存失败处理逻辑...
            e.printStackTrace();
        }
    }
    return "redirect:/uploadStatus";
}

@Controller
public class FileUploadController {
    @PostMapping("/uploadFile")
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        // 文件处理逻辑...
        return "redirect:/uploadStatus";
    }
}

<form method="POST" action="/uploadFile" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" value="Submit" />
</form>

@PostMapping("/uploadFile")
public String handleFileUpload(@RequestParam("file") MultipartFile file, Model model) {
    // 文件处理逻辑...
    return "redirect:/uploadStatus";
}

@GetMapping("/download")
public void downloadFile(HttpServletResponse response) {
    File file = new File("path/to/file");
    byte[] buffer = new byte[(int) file.length()];
    try (FileInputStream fis = new FileInputStream(file);
         OutputStream os = response.getOutputStream()) {
        fis.read(buffer);
        response.setContentType("application/octet-stream");
        response.setContentLength(buffer.length);
        response.setHeader("Content-Disposition", "attachment; filename=\"" + file.getName() + "\"");
        os.write(buffer);
        os.flush();
    } catch (IOException e) {
        // 异常处理逻辑...
        e.printStackTrace();
    }
}

@PostMapping("/uploadFile")
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
    try {
        // 文件处理逻辑...
    } catch (MultipartException e) {
        // 文件上传异常处理逻辑...
        e.printStackTrace();
    }
    return "redirect:/uploadStatus";
}

@PostMapping("/uploadFile")
public String handleFileUpload(@RequestParam("file") MultipartFile file, Model model) {
    try {
        if (file.isEmpty()) {
            throw new Exception("No file was selected for upload.");
        }
        // 文件处理逻辑...
    } catch (Exception e) {
        model.addAttribute("message", e.getMessage());
        return "errorPage";
    }
    return "redirect:/uploadStatus";
}

<h1>Upload Error</h1>
<p>${message}</p>
<a href="/uploadForm" rel="external nofollow" >Retry</a>

<input type="file" id="files" name="files[]" multiple>

document.getElementById('files').addEventListener('change', handleFiles, false);
function handleFiles() {
  const files = document.getElementById('files').files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    // 创建一个img元素用于预览图片
    if (file.type.match('image.*')) {
      const img = document.createElement('img');
      img.classList.add('obj');
      img.file = file;
      document.getElementById('preview').appendChild(img);
      // 对图片进行预加载
      const reader = new FileReader();
      reader.onload = (function(aImg) {
        return function(e) {
          aImg.src = e.target.result;
        };
      })(img);
      reader.readAsDataURL(file);
    }
    // 其他文件类型的预览可以扩展
  }
}

function uploadFiles(file) {
  const formData = new FormData();
  formData.append('file', file);
  fetch('your-upload-url', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
}
document.getElementById('files').addEventListener('change', function(e) {
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    uploadFiles(files[i]);
  }
});

function uploadFileWithProgress(file) {
  const formData = new FormData();
  formData.append('file', file);
  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      console.log('Upload progress: ' + percentComplete + '%');
    }
  }, false);
  xhr.open('POST', 'your-upload-url', true);
  xhr.send(formData);
}
document.getElementById('files').addEventListener('change', function(e) {
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    uploadFileWithProgress(files[i]);
  }
});

import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';
function MyDropzone() {
  const [files, setFiles] = useState([]);
  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })));
    }
  });
  // 渲染上传预览等逻辑...
}

<template>
  <vue-dropzone :options="dropzoneOptions"></vue-dropzone>
</template>
<script>
export default {
  data() {
    return {
      dropzoneOptions: {
        url: '/your-upload-url',
        uploadMultiple: true,
        dictDefaultMessage: 'Drop files here to upload'
      }
    };
  }
};
</script>

@PostMapping("/upload")
public ResponseEntity<String> handleFileUpload(
    @RequestParam("file") MultipartFile file,
    @RequestParam("filename") String filename) {
    // 逻辑处理代码
    return ResponseEntity.ok("File uploaded successfully");
}

public String getFileType(MultipartFile file) throws IOException {
    try (InputStream stream = file.getInputStream()) {
        Metadata metadata = new Metadata();
        metadata.set(Metadata.RESOURCE_NAME_KEY, file.getOriginalFilename());
        detector.detect(stream, metadata);
        return metadata.get(Metadata.MIME_TYPE);
    }
}

@Transactional
public void saveFileInfo(MultipartFile file) {
    FileInfo fileInfo = new FileInfo();
    fileInfo.setFilename(file.getOriginalFilename());
    fileInfo.setSize(file.getSize());
    fileInfo.setContentType(file.getContentType());
    fileInfo.setUploadDate(new Date());
    fileInfoRepository.save(fileInfo);
}

@Transactional
public FileInfo uploadFileAndSaveToDB(MultipartFile file) throws IOException {
    String originalFilename = file.getOriginalFilename();
    String fileExtension = FilenameUtils.getExtension(originalFilename);
    String uniqueFilename = UUID.randomUUID().toString() + "." + fileExtension;
    // 将文件保存到服务器上
    File targetFile = new File(uploadDir, uniqueFilename);
    file.transferTo(targetFile);
    FileInfo fileInfo = new FileInfo();
    fileInfo.setFilename(uniqueFilename);
    fileInfo.setFilePath(targetFile.getAbsolutePath());
    fileInfo.setFileType(file.getContentType());
    fileInfo.setSize(file.getSize());
    fileInfoRepository.save(fileInfo);
    return fileInfo;
}

<input type="file" id="fileUpload" accept="image/*" size="50">

@Bean
public MultipartResolver multipartResolver() {
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
    multipartResolver.setMaxUploadSize(1024 * 1024 * 5); // 限制最大上传大小为5MB
    return multipartResolver;
}

function validateFileSize(file, maxSize) {
    if (file.size > maxSize) {
        alert('文件大小超出限制。');
        return false;
    }
    return true;
}

public class FileSizeFilter implements Filter {
    private long maxFileSize;
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        String maxFileSizeStr = filterConfig.getInitParameter("maxFileSize");
        this.maxFileSize = Long.parseLong(maxFileSizeStr);
    }
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        if (request instanceof MultipartHttpServletRequest) {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            MultipartFile file = multipartRequest.getFiles("file").get(0);
            if (file.getSize() > maxFileSize) {
                throw new ServletException("文件大小超出限制。");
            }
        }
        chain.doFilter(request, response);
    }
}

function validateFileType(file, allowedExtensions) {
    const fileExtension = file.name.split('.').pop().toLowerCase();
    return allowedExtensions.includes(fileExtension);
}

public boolean isFileTypeAllowed(MultipartFile file, List<String> allowedExtensions) {
    String fileName = file.getOriginalFilename();
    String fileExtension = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
    return allowedExtensions.contains(fileExtension);
}

public boolean isMimeTypeAllowed(MultipartFile file, List<String> allowedMimeTypes) {
    String mimeType = file.getContentType();
    return allowedMimeTypes.contains(mimeType);
}

CREATE TABLE `files` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `filename` VARCHAR(255) NOT NULL,
  `filepath` VARCHAR(255) NOT NULL,
  `mimetype` VARCHAR(100) NOT NULL,
  `size` BIGINT NOT NULL,
  `upload_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  INDEX `idx_filename` (`filename`)
);

@Service
public class FileUploadService {
    @Autowired
    private FileRepository fileRepository;
    @Transactional
    public void uploadFile(MultipartFile file) throws IOException {
        // 1. 检查文件信息
        if (file.isEmpty()) {
            throw new IllegalArgumentException("上传的文件不能为空");
        }
        // 2. 保存文件到本地服务器
        String filename = saveFileLocally(file);
        // 3. 保存文件信息到数据库
        FileEntity fileEntity = new FileEntity();
        fileEntity.setFilename(file.getOriginalFilename());
        fileEntity.setFilepath(filename);
        fileEntity.setMimetype(file.getContentType());
        fileEntity.setSize(file.getSize());
        fileRepository.save(fileEntity);
    }
    private String saveFileLocally(MultipartFile file) throws IOException {
        // ... 实现文件保存逻辑 ...
    }
}

function uploadChunk(file, chunkIndex, totalChunks, chunkData) {
    const formData = new FormData();
    formData.append('file', chunkData);
    formData.append('chunkIndex', chunkIndex);
    formData.append('totalChunks', totalChunks);
    // 这里可以添加更多的文件信息，如文件名，用户ID等
    return fetch('/upload', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        // 处理后端返回的数据
        if (data.status === 'success') {
            // 成功上传的逻辑
        } else if (data.status === 'incomplete') {
            // 需要重新上传的逻辑
        }
    })
    .catch(error => {
        // 处理异常
        console.error('Upload chunk failed', error);
    });
}
// 示例中省略了具体文件分块和上传状态管理的代码

// 使用Spring的MultipartFile接收文件块数据
@PostMapping("/upload")
public ResponseEntity<String> uploadChunk(
    @RequestParam("file") MultipartFile fileChunk,
    @RequestParam("chunkIndex") int chunkIndex,
    @RequestParam("totalChunks") int totalChunks) {
    // 文件块校验逻辑（省略）
    // 将文件块写入临时目录
    try (InputStream inputStream = fileChunk.getInputStream();
         OutputStream outputStream = new FileOutputStream(new File(TEMP_FILE_PATH, chunkIndex + ".part"))) {
        byte[] buffer = new byte[1024];
        int bytesRead;
        while ((bytesRead = inputStream.read(buffer)) != -1) {
            outputStream.write(buffer, 0, bytesRead);
        }
        // 文件块状态记录（省略）
    } catch (IOException e) {
        // 异常处理逻辑（省略）
    }
    // 返回响应信息给前端
    return ResponseEntity.ok("Chunk uploaded successfully");
}
// 示例中省略了文件合并与恢复、文件完整性校验等逻辑