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

视频演示:

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

需要完成以下步骤:

  1. 创建工程并引入依赖包

  2. 对文件进行操作,上传、预览和删除
  3. 添加跨域功能
  4. <font color = red>前端使用VUE,前后端分离</font>
  5. <font color = red>看不懂代码,不建议下载</font>
  6. 可以参考上一篇文章,文件上传采用Form方式(前后端不分离)

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

FileUploadController.java

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");
    }


}

原文 

https://segmentfault.com/a/1190000023063834

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » Vue SpringBoot 文件操作、上传、预览和删除

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址