springboot-vue 实现文件上传

最新推荐文章于 2022-05-08 23:09:13 发布

梁晨le

最新推荐文章于 2022-05-08 23:09:13 发布

阅读量228

点赞数

分类专栏： Springboot Study 文章标签： upload servlet web Vue

本文链接：https://blog.csdn.net/Dar_shen/article/details/111831713

版权

Springboot Study 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

放假第一天，从学会上传文件开始。

首先创建一个springboot文件项目

创建controller

内容如下：

package com.example.fileupload;

import org.springframework.web.bind.annotation.CrossOrigin;
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 FileUpload {

    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

    @CrossOrigin
    @PostMapping("/upload")
    public Map<String , Object> fileupload(MultipartFile file, HttpServletRequest request) throws IOException {
        Map<String,Object> result = new HashMap<>();
        String originName = file.getOriginalFilename();
        if (!originName.endsWith(".pdf")){
            result.put("status","error");
            result.put("msg","文件类型不对");
            return result;
        }
        String format = sdf.format(new Date());
        String realPath = request.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));
            String url = request.getScheme()+"://"+request.getServerName()+":"+request.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;

    }

}

properties文件设置


server.port=8080
spring.servlet.multipart.max-file-size=100MB

前端static文件下创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-upload
            class="upload-demo"
            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文件，且不超过100MB</div>
    </el-upload>
</div>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
    el: '#app',
    methods: {
        handlePreview(file){
            window.open(file.response.url);
        }
    }
    }
)
</script>
</body>
</html>

上传界面如下：

okkkklkk了

梁晨le

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot-vue 实现文件上传

放假第一天，从学会上传文件开始。首先创建一个springboot文件项目创建controller内容如下：package com.example.fileupload;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annot
复制链接

扫一扫