Vue-SpringBoot-文件操作上传预览和删除

https://www.bilibili.com/video/BV1VK4y1s7b1/

创建工程并引入依赖包
- spring-boot-starter-web
- lombok
对文件进行操作，上传、预览和删除
添加跨域功能
<font color = red> 前端使用 VUE，前后端分离 </font>
<font color = red> 看不懂代码，不建议下载 </font>
可以参考上一篇文章, 文件上传采用 Form 方式 (前后端不分离)

package com.example.spring.fileupload;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.util.FileSystemUtils;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.method.annotation.MvcUriComponentsBuilder;

import java.io.IOException;
import java.net.MalformedURLException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.nio.file.StandardCopyOption;
import java.util.List;
import java.util.stream.Collectors;

@RestController
public class FileUploadController {

    // 上传文件路径
    @Value("${file.base.director}")
    private String fileBaseDirector;
    private Path fileBasePath;

    @Autowired
    private void createDirectories(){
        try {Files.createDirectories(Paths.get(fileBaseDirector));
        } catch (IOException e) {e.printStackTrace();
        }
        this.fileBasePath = Path.of(fileBaseDirector);
    }


    @GetMapping("/loadAll")
    public ResponseEntity loadAll() throws IOException {List<FileObject> filesAll = Files.walk(fileBasePath,1)
                .filter(path -> !path.equals(fileBasePath))
                .map(path -> {String url = MvcUriComponentsBuilder.fromMethodName(FileUploadController.class,"loadFile",path.getFileName().toString()).build().toString();
                    FileObject  fileObject = new FileObject(path.getFileName().toString(),url);
                    return fileObject;
                }).collect(Collectors.toList());
        return ResponseEntity.ok(filesAll);
    }


    @DeleteMapping("delete/{fileName}")
    public ResponseEntity deleteFile(@PathVariable String fileName){Path deletePath = fileBasePath.resolve(fileName);
        Boolean isDelete = Boolean.FALSE;
        try {isDelete = FileSystemUtils.deleteRecursively(deletePath);
        } catch (IOException e) {e.printStackTrace();
        }
        return ResponseEntity.ok(isDelete);
    }
    
    @GetMapping("/{fileName}")
    public ResponseEntity loadFile(@PathVariable String fileName){Path path = fileBasePath.resolve(fileName);
        Resource  resource = null;
        try {resource = new UrlResource(path.toUri());
        } catch (MalformedURLException e) {e.printStackTrace();
        }
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION,"attachment;filename=\""+resource.getFilename()+"\"")
                .body(resource);
    }


    @PostMapping("/upload")
    public ResponseEntity upload(@RequestParam("file") MultipartFile file){String fileName = StringUtils.cleanPath(file.getOriginalFilename());
        Path path = Path.of(fileBaseDirector + fileName);
        try {Files.copy(file.getInputStream(),path,StandardCopyOption.REPLACE_EXISTING);
        } catch (IOException e) {e.printStackTrace();
        }
        return ResponseEntity.ok("OK");
    }


}

Vue-SpringBoot-文件操作上传预览和删除

视频演示:

需要完成以下步骤:

FileUploadController.java