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

最新推荐文章于 2021-12-17 12:39:53 发布

qq_992833908

最新推荐文章于 2021-12-17 12:39:53 发布

阅读量780

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41436920/article/details/82989810

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

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

6.1需求分析

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

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

6.2后端代码

6.2.1 工具类

（1）mall-common工程pom.xml引入依赖

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

<artifactId>fastdfs</artifactId>

</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 配置文件

将“资源/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>

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

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）修改图片上传窗口，调用上传方法，回显上传图片

<tr>

</tr>

<tr>

<td>

<table>

<tr>

<td>

上传

</button>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

（3）修改新建按钮

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）修改上传窗口的保存按钮

（3）遍历图片列表

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

</tr>

6.3.4 移除图片

在goodsController.js增加代码

//列表中移除图片

$scope.remove_image_entity=function(index){

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

}

修改列表中的删除按钮