Vue+SpringBoot实现文件上传

Vue+SpringBoot实现文件上传

• 最近由于业务需求，需要实现一个文件上传的上传的功能，可以是图片，也可以是文档，总之文件类型是随意的。下面我将会演示是一个简化版的文件上传示例。由于这里只需要简单的上传一个文档，因此没有实现限制文件大小的代码。
• 由于本人也是菜鸟一个，写此文章也为记录一下实现方法，当然也希望能给一些小伙伴带来帮助。代码写的不是很好，感谢读者指出不足之处。

前端页面:

前端页面

• 可以看到，该页面包含选择文件以及输入姓名两个表单。所以我并没有选择用form表单提交数据，而是直接使用Vue的双向数据绑定获取的文件信息与输入信息。
• 在提交时，你可能会遇到各种各样的问题，其中包括跨域问题，跨域问题的简单解决方案会在后端代码中给出。

前端代码:

后端代码:

@CrossOrigin
@RestController
@RequestMapping("/ensure")
public class MyController {
    //上传文件
    @PostMapping("/uploadwork")
    public String uploadWork(HttpServletRequest request,@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {

        request.setCharacterEncoding("UTF-8");
        String user = request.getParameter("user");

        if(!file.isEmpty()) {
            String fileName = file.getOriginalFilename();
            String path = null;
            String type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
            if (type != null) {
                if ("DOCX".equals(type.toUpperCase())||"DOC".equals(type.toUpperCase())) {
                    // 项目在容器中实际发布运行的根路径
                    String realPath = request.getSession().getServletContext().getRealPath("/");
                    // 自定义的文件名称
                    String trueFileName = user + "_" + fileName;

                    // 设置存放图片文件的路径
                    path = "/workplace/classwork/" + trueFileName;
                    File dest = new File(path);
                    //判断文件父目录是否存在
                    if (!dest.getParentFile().exists()) {
                        dest.getParentFile().mkdir();
                    }

                    file.transferTo(dest);

                    return trueFileName;
                }else {
                    return "error";
                }
            }else {
                return "error";
            }
        }else {
            return "error";
        }
    }
}

• 这段代码看起来可能会有一点难理解，但相信你只需要稍加思索就可以理解啦。
• **@CrossOrigin: **为Spring Boot的实现类加上此注解即可轻松解决跨域问题，这是不是要比上面在前端解决跨域问题简单得多呢。

提交成功:

提交成功

文集推荐:

Java基础方法集1
Python基础知识完整版
Spring Boot学习笔记
Linux指令进阶
Java高并发编程
SpringMVC基础知识进阶
Mysql基础知识完整版
健康管理系统学习花絮(学习记录)
Node.js基础知识(随手笔记)
MongoDB基础知识
Dubbo学习笔记
Vue学习笔记(随手笔记)

声明：发表此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本我们(QQ:981086665；邮箱:[email protected])联系联系，我们将及时更正、删除，谢谢。