SpringBoot+Vue+PDF上传和预览（图解超详细）

参考自：https://www.bilibili.com/video/BV1ei4y1M7Kf 这个教程。
首先创建一个新的项目：
在这里插入图片描述

除了这几个关键的地方，一路next就行了。

开始编写代码，先创建一个FileUploadController
对于代码，需要有以下知识

@RestController
的作用，https://www.cnblogs.com/yaqee/p/11256047.html
@PostMapping的作用：也就是映射一个post请求，https://blog.csdn.net/nangeali/article/details/82470201

format(new Date())的意思是也就是格式化一个新的时间
Date会创建一个时间，然后会按照当前的sdf格式调用format将当前时间创建出来直接调用new Date()可能会出现这种格式
Sun Feb 28 10:55:06 CST 2021 再是getServletContext 和getRealPath
https://blog.csdn.net/yasi_xi/article/details/22184331

UUID.randomUUID().toString()
用java生成不重复的字符串https://blog.csdn.net/qq_37126357/article/details/100889753

代码如下：

package com.example.file_updown;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@RestController
public class FileUploadController {
    
    
    //然后是用日期来进行文件分配
    //这个格式，等下改一下试试看
    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

    @PostMapping("/upload")
    public Map<String, Object> fileupload(MultipartFile file, HttpServletRequest req) {
    
    
        //首先要给文件找一个目录
        //先写返回值
        Map<String, Object> result = new HashMap<>();
        //再用pdf格式开始书写,先找原始的名字
        String originName = file.getOriginalFilename();
        //判断文件类型是不是pdf
        if(!originName.endsWith(".pdf")){
    
    
            //如果不是的话，就返回类型
            result.put("status","error");
            result.put("msg","文件类型不对");
            return result;
        }
        //如果是正确的话，就需要写保存文件的文件夹
        //.format(new Date())的意思是 也就是格式化一个新的时间
        //Date会创建一个时间，然后会按照当前的sdf格式调用format将当前时间创建出来 直接调用new Date()可能会出现这种格式
        //Sun Feb 28 10:55:06 CST 2021
        //再是getServletContext
        String format=sdf.format(new Date());
        //这也是一个临时的路径，项目重启之后，他就会变的
        String realPath = req.getServletContext().getRealPath("/") +format;
        //再是保存文件的文件夹
        File folder = new File(realPath);
        //如果不存在，就自己创建
        if(!folder.exists()){
    
    
            folder.mkdirs();
        }
        String newName = UUID.randomUUID().toString() + ".pdf";

        //然后就可以保存了
        try {
    
    
            file.transferTo(new File(folder,newName));
            //这个还有一个url
           String url= req.getScheme()+"://"+req.getServerName()+":"+req.getServerPort()+format+newName;
            //如果指向成功了
            result.put("status","success");
            result.put("url",url);
        } catch (IOException e) {
    
    
            //返回异常
            result.put("status","error");
            result.put("msg",e.getMessage());
        }
        return  result;
    }
}

启动项目之后
在这里插入图片描述
先使用Postman 测试一下
用图片测试：

用PDF测试：

报了这个错
主要是文件太大，所以需要进行修改

这里100MB可能还是会小，要么选更大的，要么选小一点的pdf.

这样就行了,这个链接也是可以从浏览器这边复制读取到。
再开始写前端
在这个地方
https://element.eleme.cn/#/zh-CN/component/upload
在这里插入图片描述
复制下面的代码

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

再static文件夹下创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-upload
            action="/upload"
            :on-preview="handlePreview"
            accept=".pdf"
            :limit="10">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过500kb</div>
    </el-upload>
</div>
<!-- import Vue before Element-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
    
    
    el:'#app',
    methods:{
    
    
        handlePreview(file){
    
    
            window.open(file.response.url);
        }
    }
})
</script>
</body>
</html>

在这里插入图片描述

SpringBoot+Vue+PDF上传和预览（图解超详细）

猜你喜欢