文件上传(Vue+Springboot)

用Spring框架中提供的MultipartFile(org.springframework.web.mutipar包下的类)处理文件上传,MultipartFile结构不复杂并且提供了很多强大便捷的API ,这个类多用来接收前端页面传过来的文件。好了介绍完后端用到的之后,下面介绍一下前端部分的,前端部分主要就是请求头的问题和post请求数据的包装FormData的简单使用。

预览:

为了方便阅读这里将用到的API简单的介绍一下:

        getOriginalFileName方法 :获取的是文件名,包括拓展名如JPG、PNG

         transferTo方法 :用来将接收文件传输到给定目标路径

         isEmpty方法:判断传入的文件是否为空

了解更多可查看官方文档MultipartFile (Spring Framework)

  System.getProperty("user.dir"):查看当前工程路径

FormDate主要用于将表单数据中的name和value值进行序列化和异步文件上传。

          get(key)与getAll(key)可以用来获取相对应的值

          append(key,value)用于添加数据

了解更多API可查看官方文档FormData - Web API 接口参考 | MDN (mozilla.org)

请求头问题的解决:

  前端页面的实现:

 这里只能限制上传图片,文件上传是对文件类型和上传大小进行的限制是由fileChange方法实现的。若是文件类型和大小不对则进行相应的提示。

效果为:

文件上传的代码和表单数据的整理:

后端SpringBoot部分:

       获取到页面传送的数据,将得到的文件保存到指定的路径并将文件路径和其他数据保存到数据库里,将成功与否的信息返回页面。

希望路过的大佬不要嫌弃,若有不对之处还希望指正为谢!@~@ 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值