图片上传--SpringMVC实现RESTful接口

一、利用SpringMVC实现RESTful接口，获取包括图片在内的若干字段值。
RESTful接口的实现
`
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.mime.MultipartEntityBuilder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.node.ArrayNode;
import com.fasterxml.jackson.databind.node.ObjectNode;

import com.xx.persistence.Recommendation;
import com.xx.service.RecommendationService;

@Controller
@RequestMapping(value = "/recommend")
public class RecommendController {

private final Log logger = LogFactory.getLog(RecommendController.class);

 @Autowired
 @Qualifier("recommendationService")
 RecommendationService recommendationService;//这里只用来添加生成的Recommendation实例

 @RequestMapping(value="/add-recommend",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
 public @ResponseBody String addRecommend(
           @RequestParam (value="contentId")String contentId,//推荐的内容id
           @RequestParam ("type")String type,//推荐的内容类型
           @RequestParam ("name") String name,//内容名称
           @RequestParam ("poster") MultipartFile  poster,//内容海报（即上传的图片）
           @RequestParam ("description") String description,//描述
           @RequestParam ("url") String url,//内容对应的url
           @RequestParam ("recommendDate") String recommendDateStr//推荐的时间
           ){
      System.out.println("begin to add recommendation:");
      ObjectNode result = new ObjectMapper().createObjectNode();
      if (type==null || name == null || poster ==null|| description ==null|| recommendDateStr == null || url == null) {
           return returnIllegalMsg();
      }
      //获取文件名
      String fileName = poster.getOriginalFilename();
      long currentTime = System.currentTimeMillis();
      String path = type + File.separatorChar + contentId + File.separatorChar +currentTime + File.separatorChar + fileName;
      //图片的uri路径
      String uriPath = filePath.getUriRoot() + path;//filePath.getUriRoot()能够改成你须要的虚拟路径
      System.out.println("uriPath =" + uriPath);
      Date date = null;
      try {
           date = (new SimpleDateFormat("yyyy-MM-dd hh:mm:ss")).parse(recommendDateStr);
      } catch (Exception e) {
           e.printStackTrace();
      }
      Recommendation r = recommendationService.addRecommendation(new Recommendation(contentId, type, name, uriPath, description, url, date));
      //图片的存储路径
      String dstFilePath = filePath.getRoot() + path;//filePath.getRoot()能够改成你须要的存储路径
      System.out.println("dstFilePath =" + dstFilePath);

      if(r!= null){
           File picFile = new File(dstFilePath);
           if(!picFile.exists()){
                if(!picFile.getParentFile().exists()){
                     picFile.getParentFile().mkdirs();
                }
                try {
                     //存储文件
                     poster.transferTo(picFile);
                } catch (IllegalStateException e) {
                     e.printStackTrace();
                } catch (IOException e) {
                     e.printStackTrace();
                }
           }
           //返回添加后的推荐条目id
           result.put("recommendId", r.getId());
           return result.toString();
      }
      return returnIllegalMsg();
 }

 //返回参数错误的提示信息（json格式）
 private String returnIllegalMsg(){
      ObjectNode result = new ObjectMapper().createObjectNode();
      result.put("ret_code", 00001);
      result.put("ret_msg", "Illegal Parameters");
      return result.toString();
 }

}`

二、js发送post请求来模拟form表单提交。
为了测试上述的接口，提供一个js提交post请求的例子
这是对应的div

<div id="div_addRecommendation">
 <h1>添加热门推荐</h1>

 <label>资源Id</label>
 <input type="text" name="add_contentId" id="add_contentId" class="txtfield" />

 <label>类型</label><br/>
 <select id="add_type" >
      <option value="video" id="option_video">视频</option>
      <option value="news" id="option_news">新闻</option>
      <option value="music" selected="selected">音乐</option>
      <option value="lottery">彩票</option>
      <option value="groupon">团购</option>
      <option value="game">游戏</option>
      <option value="travel">旅游</option>
 </select>

 <label>名称</label>
 <input type="text" name="add_name" id="add_name" class="txtfield" />

 <label >描述</label>
 <input type="text" name="add_description" id="add_description" class="txtfield" />

 <label>连接</label>
 <input type="text" name="add_url" id="add_url" class="txtfield" />

 <label >推荐时间</label>
 <input type="text" name="add_recommendDate" id="add_recommendDate" class="txtfield" />

 <label >上传图片</label>
 <input id="f" type="file" name="f"/>

<input type="button" name="add_recommend" id="add_recommend" class="flatbtn-blu hidemodal" value="添加"/>

js点击添加，ajax发送post请求

$("#add_recommend").click(function(){
 var contentId = $("#add_contentId").val();
 var type = $("#add_type").val();
 var name = $("#add_name").val();
 var poster = document.getElementById("f").files[0];
 var description = $("#add_description").val();
 var url = $("#add_url").val();
 var recommendDate = $("#add_recommendDate").val();
 var request = location.protocol+"//"+location.host+"/xxx/recommend/add-recommend";
 var data = new FormData();
 data.append("contentId",contentId);
 data.append("type",type);
 data.append("name",name);
 data.append("poster",poster);
 data.append("description",description);
 data.append("url", url);
 data.append("recommendDate",recommendDate);

 $.ajax({
             url: request,
             data: data,
             cache : false,
             processData : false,
             contentType : false,
             type: 'POST',
             timeout:3000,
             success: function(result){
                alert("添加成功，recommendId为"+result.recommendId);
                location.href = "${recommend}/recommend";
           },
           error:function(){
                alert("reqeust error");
           }
      });});

若是要实现上传多张图片的话，首先设置input标签中的

multiple="true/multiple/不写属性"

而后对应接口将MultipartFile类改成MultipartFile[]数组便可。

文章旨在记录一下文件上传的实现方式，若是有什么不科学的地方，还须要你们批评指正。

---

因为项目逐渐变大，将图片和各个字段混合在一块儿存储不是一个好的方式，因而我将图片存储的服务独立了出来，利用Jersey实现的RESTful接口，专一于操做图片。 上班时间到啦，那么下一篇再介绍利用Jersey与post请求是如何实现图片上传的。