前后端分离实现图片上传的功能

最新推荐文章于 2024-04-07 17:20:06 发布

原创

最新推荐文章于 2024-04-07 17:20:06 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#java #angular

本文介绍了使用AngularJS实现图片上传和预览功能的前端代码，包括图片显示、选择和预览操作。同时展示了后端如何接收图片并保存，涉及控制器方法和文件处理。在前端，图片通过FormData对象发送，后端使用MultipartFile接收并保存到指定路径。

由于最近开发的项目需要有上传图片的功能，并且能够让上传的图片能够在网页上预览出来。所以写下此篇文章，记录一下学习到的知识。
1，前端
前端项目是采用angularjs框架搭建的。图片上传功能在前端的代码分布在两个部分，一部分是图片上传页面的表单代码，一部分是在对应的controller中的代码。下面对这两方面代码进行展示。
(1)页面代码

    <form class="form-horizontal" role="form" id="editForm"
                          name="editForm" ng-model="editForm" novalidate>
                        <div class="form-group">
                            <label class="col-xs-3 col-sm-3 control-label no-padding-right">
                                <span class="red">*</span>菜单ID
                            </label>
                            <div class="col-xs-6 col-sm-6">
                                <input type="text" ng-model="dataItem.menuId" class="col-xs-9 col-sm-9" readonly />
                            </div>
                            <div class="space-4"></div>
                        </div>
                       
                       
                        <div class="form-group">
                            <label class="col-xs-3 col-sm-3 control-label no-padding-right">
                                <span class="red">*</span>图片预览
                            </label>
                            <div class="col-xs-6 col-sm-6">
                                <div class="col col-sm-4 text-left">
                                    <img id="imgadd" width="300px" ng-src="{
  
  {contextPath}}/showImg?path={
  
  {dataItem.imgAddress}}"
                                         style="width:200px; height: 200px; max-width:500px;" onerror ="this.src='modules/moi/views/default404.png'"/>
                                </div>
                            </div>
                            <div class="space-4"></div>
                        </div>

                        <div