本文共 5196 字，大约阅读时间需要 17 分钟。
在商品录入界面实现多图片上传
当用户点击新建按钮，弹出上传窗口
（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
（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> |
在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, "上传失败"); } } } |
（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> |
（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> |
（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> |
在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> |
转载地址：http://pioen.baihongyu.com/