ssm框架maven工程上传和删除图片

本文档详细介绍了如何在SSM框架下实现图片上传和删除功能。首先分析了需求,接着从后端代码的工具类、配置文件、控制层入手,然后转向前端代码的服务层、上传图片、图片列表展示以及移除图片的操作。涉及到FastDFSClient工具类的使用,配置文件的配置,以及AngularJS在前端的处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

6.1需求分析

在商品录入界面实现多图片上传

当用户点击新建按钮,弹出上传窗口

6.2后端代码

6.2.1 工具类

(1)mall-common工程pom.xml引入依赖

   <!-- 文件上传组件 -->

<dependency>

    <groupId>org.csource.fastdfs</groupId>

    <artifactId>fastdfs</artifactId>

</dependency>

<dependency>

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency>

(2)将“资源/fastDFS/工具类”的FastDFSClient.java 拷贝到mall-common工程src/main/java/uitl/FastDFSClient.java

 

6.2.2 配置文件

  1. 将“资源/fastDFS/配置文件”文件夹中的 fdfs_client.conf 拷贝到mall-seller-web工程src/main/resources/config文件夹

(2)在mall-seller-web工程src/main/resources/config/application.properties添加配置

FILE_SERVER_URL=http://192.168.0.133/

(3)在mall-seller-web工程springmvc.xml添加配置:

<!-- 配置多媒体解析器 -->

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

<property name="defaultEncoding" value="UTF-8"></property>

<!-- 设定文件上传的最大值5MB,5*1024*1024 -->

<property name="maxUploadSize" value="5242880"></property>

</bean>

 

6.2.3 控制层

mall-seller-web新建UploadController.java

package com.cblue.shop.controller;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import org.springframework.web.multipart.MultipartFile;

import entity.Result;

import util.FastDFSClient;

/**

 * 文件上传Controller

 */

@RestController

public class UploadController {

@Value("${FILE_SERVER_URL}")

private String FILE_SERVER_URL;//文件服务器地址

@RequestMapping("/upload")

public Result upload( MultipartFile file){

//1、取文件的扩展名

String originalFilename = file.getOriginalFilename();

String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);

try {

//2、创建一个 FastDFS 的客户端

FastDFSClient fastDFSClient  

= new FastDFSClient("classpath:config/fdfs_client.conf");

//3、执行上传处理

String path = fastDFSClient.uploadFile(file.getBytes(), extName);

//4、拼接返回的 url 和 ip 地址,拼装成完整的 url

String url = FILE_SERVER_URL + path;

return new Result(true,url);

} catch (Exception e) {

e.printStackTrace();

return new Result(false, "上传失败");

}

}

}

 

6.3前端代码

6.3.1 服务层

(1)在mall-seller-web工程创建uploadService.js

//文件上传服务层

app.service("uploadService",function($http){

this.uploadFile=function(){

var formData=new FormData();

    formData.append("file",file.files[0]);   

return $http({

            method:'POST',

            url:"../upload.do",

            data: formData,

            headers: {'Content-Type':undefined},

            transformRequest: angular.identity

        });

}

});

anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined,这样浏览器帮我们把Content-Type 设置为 multipart/form-data.

通过设置 transformRequest: angular.identity ,anjularjs transformRequest function 将序列化我们的formdata object.

 

(2)将uploadService服务注入到goodsController.js 中

//商品控制层(商家后台)

app.controller('goodsController' ,function($scope,$controller,goodsService,itemCatService,uploadService){

(3)在goods_edit.html引入js

<script type="text/javascript" src="../js/base.js"></script>

<script type="text/javascript" src="../js/service/goodsService.js"></script>

<script type="text/javascript" src="../js/service/itemCatService.js"></script>

<script type="text/javascript" src="../js/service/uploadService.js"></script>

<script type="text/javascript" src="../js/controller/baseController.js"></script>

<script type="text/javascript" src="../js/controller/goodsController.js"></script>

6.3.2 上传图片

(1)goodsController.js编写代码

/**

 * 上传图片

 */

$scope.uploadFile=function(){   

uploadService.uploadFile().success(function(response) {        

         if(response.success){//如果上传成功,取出url

         $scope.image_entity.url=response.message;//设置文件地址

         }else{

         alert(response.message);

         }

        }).error(function() {           

              alert("上传发生错误");

        });        

    };    

 

(2)修改图片上传窗口,调用上传方法,回显上传图片

<div class="modal-body">

<table class="table table-bordered table-striped">

       <tr>

       <td>颜色</td>

       <td><input  class="form-control" placeholder="颜色" ng-model="image_entity.color">  </td>

       </tr>     

       <tr>

       <td>商品图片</td>

       <td>

<table>

<tr>

<td>

<input type="file" id="file" />                 

                <button class="btn btn-primary" type="button" ng-click="uploadFile()">

                    上传

                </button>

            </td>

<td>

<img  src="{{image_entity.url}}" width="200px" height="200px">

</td>

</tr>

</table>

       </td>

       </tr>       

 </table>

</div>

(3)修改新建按钮

<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal" ng-click="image_entity={}" ><i class="fa fa-file-o"></i> 新建</button>

 

6.3.3 图片列表

(1)在goodsController.js增加方法

   //定义页面实体结构,用于前端显示添加的图片

 $scope.entity={goods:{},goodsDesc:{itemImages:[]}};

    //添加图片列表

    $scope.add_image_entity=function(){    

        $scope.entity.goodsDesc.itemImages.push($scope.image_entity);

    }

(2)修改上传窗口的保存按钮

<button class="btn btn-success" ng-click="add_image_entity()" data-dismiss="modal" aria-hidden="true">保存</button>

(3)遍历图片列表

<tr ng-repeat="pojo in entity.goodsDesc.itemImages">

 <td>{{pojo.color}}</td>

 <td><img alt="" src="{{pojo.url}}" width="100px" height="100px"></td>

<td><button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>

</tr>

6.3.4 移除图片

在goodsController.js增加代码

    //列表中移除图片

    $scope.remove_image_entity=function(index){

         $scope.entity.goodsDesc.itemImages.splice(index,1);

    }

修改列表中的删除按钮

<button type="button" class="btn btn-default" title="删除" ng-click="remove_image_entity($index)"><i class="fa fa-trash-o"></i> 删除</button>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值