Spring Boot+Vue实现文件上传以及在线预览

后端

@RestController
public class FileUploadController {

    @PostMapping("/upload")
    public Map<String, Object> fileupload(MultipartFile file, HttpServletRequest request) {
        Map<String, Object> result = new HashMap<>();
        String originalFilename = file.getOriginalFilename();
        if (!originalFilename.endsWith(".pdf")) {
            result.put("status", "error");
            result.put("messgae", "文件类型不正确");
            return result;
        }
        String realPath = request.getServletContext().getRealPath("/");
        File folder = new File(realPath);
        if (!folder.exists()) {
            folder.mkdirs();
        }
        String newName = UUID.randomUUID() + ".pdf";
        try {
            file.transferTo(new File(folder, newName));
            String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + newName;
            result.put("status", "success");
            result.put("message", "上传成功");
            result.put("url", url);
        } catch (IOException e) {
            result.put("status", "error");
            result.put("messgae",e.getMessage());
        }
        return result;
    }
}

测试:
先上传一个图片试试看
在这里插入图片描述
再试一下pdf文件
在这里插入图片描述
成功访问
在这里插入图片描述
tip:默认上传大小不能超过1MB,可以在application.properties中配置
在这里插入图片描述

前端

使用Vue+Element

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

测试

启动项目,进行测试。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以成功上传并且在线预览

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页