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

最新推荐文章于 2024-06-27 11:00:34 发布

zzn的进阶笔记

最新推荐文章于 2024-06-27 11:00:34 发布

阅读量1.2k

点赞数 2

分类专栏：文件上传下载文章标签： java spring boot

本文链接：https://blog.csdn.net/weixin_49092494/article/details/120838070

版权

文件上传下载专栏收录该内容

2 篇文章 0 订阅

订阅专栏

"本文介绍了如何使用HTML5的`<input type="file">`结合axios进行文件上传，前端通过FormData构造参数，后端Spring Boot处理并存储图片。展示了上传过程及所需依赖配置。"

摘要由CSDN通过智能技术生成

第一步
前端写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")
    @ResponseBody
    public 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;
    }