springboot+前端实现文件(图片)上传到指定目录

第一步
前端写html的代码

       <!--            联系方式--><div class="layui-form-item"><label for="file" class="layui-form-label"><span class="x-red">*</span>上传图片</label><div class="layui-input-inline"><input type="file" id="file" name="file" v-model="file" required="" lay-verify="required" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>上传图片</div></div>

            //完成增加方法add:function (){let params = new FormData();params.append('id',this.id);params.append('saleId',this.saleId);params.append('saleName',this.saleName);params.append('sex',this.sex);let files = $("#file")[0].files[0];params.append('file',files);let config = {'Content-Type':false};axios.post('/sale/add', params,config).then(function (response) {if (response.status == 200){console.log(response.data);//执行重定向// window.location.href = response.data;var index = parent.layer.getFrameIndex(window.name);//关闭当前页 关闭小弹窗parent.layer.close(index);parent.location.reload(); //刷新父页面}}).catch(function (error) {// console.log(error.data);//undefined，之前以为这样可以拿到错误信息// console.log(error.response.data.rentCarTime);//可以拿到后端返回的信息});}

后端需要导入的pom依赖

        <!-- 文件上传 --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency>

#文件上传到指定项目目录
upload-path: E:/car-manager/src/main/resources/static/images/
spring:
resources:
static-locations: classpath:/static/,file:${upload-path}
spring.http.multipart.enabled=false
multipart.maxFileSize=5000KB
multipart.maxRequestSize=5000KB

controller

    @Value("${upload-path}")private String uploadPath;//增@PostMapping("/add")@ResponseBodypublic String saleAdd(Sale sale, FileAll fileAll) throws IOException {System.out.println(sale);System.out.println(fileAll.getFile());MultipartFile file = fileAll.getFile();if (!file.isEmpty()){//           获得图片名字String filename = file.getOriginalFilename();
//           将完整路径放到一个对象里面String fileAlls = uploadPath+filename;System.out.println(uploadPath);System.out.println(fileAlls);
//            把图片的名字放到sale对象里面保存sale.setImgPath(filename);
//           保存到数据库saleService.save(sale);
//           保存到项目的指定文件夹FileUtils.copyInputStreamToFile(file.getInputStream(),new File(fileAlls));}return null;}

springboot+前端实现文件(图片)上传到指定目录相关推荐

前端js实现图片上传
前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片 ...
SpringBoot实现oss文件的上传与下载
SpringBoot实现oss文件的上传与下载最近项目中需要通过OSS来实现文件的上传和下载以及根据oss文件(word模板)生成Word,特此记录,以便日后查阅. 一.相关概述 OSS对象存储 ...
SpringBoot 项目将文件图片资源上传到本地静态资源文件夹下（指定文件夹下）
1.SpringBoot 项目将文件图片资源上传到本地静态资源文件夹下(指定文件夹下) 最终效果: 前端浏览本地文件,点击上传至本地resources/static/images/imgWall下 2 ...
文件图片上传及少许正则校验
文件 & 图片上传及少许正则校验 <template><div style="padding: 20px"><Row><Col ...
单文件图片管理php,php封装的单文件(图片)上传类完整实例
本文实例讲述了php封装的单文件(图片)上传类.分享给大家供大家参考,具体如下: //封装php中的单文件(图片)上传类 /* //参数1:$file 文件数组 5个属性值 name,type,siz ...
WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
Retrofit 2.0 超能实践（三），轻松实现多文件/图片上传/Json字符串/表单
通过前两篇姿势的入门 Retrofit 2.0 超能实践,完美支持Https传输 Retrofit2.0 完美同步Cookie实现免登录本文出自:http://blog.csdn.net/sk719 ...
Retrofit 2.0 轻松实现多文件/图片上传/Json字符串/表单
如果嫌麻烦直接可以用我封装好的库:Novate: https://github.com/Tamicer/Novate 通过对Retrofit2.0的前两篇的基础入门和案例实践,掌握了怎么样使用Retr ...
jsp 文件/图片上传tomcat服务器
关于文件/图片上传tomcat服务器 1.环境准备和情况说明 JSP 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器. 上传的文件可以是文本文件或图像文件或任何文档. 使用 Se ...

springboot+前端实现文件(图片)上传到指定目录

springboot+前端实现文件(图片)上传到指定目录相关推荐

最新文章

热门文章