基於Springmvc使用jq異常圖片上傳至fastDFS 加回顯

我們在開發的時候經常遇到一個場景，在修改一個對象信息的時候，會讓圖片上傳上去，並加顯。比如個人信息的頭像上傳，品牌信息的圖片上傳

分析：

1. 這種場景下我們經常會使用ajax異步傳輸的方式來實現這個功能。

2. 我們這里使用的是基於springmvc開發的。所有需要給springmvc進行配置.(添加一個接收文件的配置文件，搭建環境這里不提)。

3.當圖片較多的時候，需要用到fastDFS專門設置一個圖片服務器

第一步：導入jquery.form.js

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

第二步：編輯前端頁面

<!--表單-->
<form id="jvForm" >
    <input type="file" name="pic"  onchange="uploadPic()"/>
</form>

<!--js-->

<script type="text/javascript">
    
    function uploadPic(){
        
        var option={
                url:"/upload/uploadPic.do",           <!--提交到后台的地址，讓controller接收-->
                type:"POST",
                dataType:"json",   <!--注意這里dataType:"json" 中的json不能是大寫的 要不不識別，返回的json字符串，小寫的返回json對象-->
                success:function(data){
                    alert(data);   //返回的是  Object object為json對象 否則為json字符串
                    // 圖片回顯
                    $("#allUrl").attr("src",data.allUrl);
                
                    
                }
        }
        $("#jvForm").ajaxSubmit(option);
    }
    
</script>

 

第三步：在后台spring配置文件上傳解析器

<!-- 配置上傳解析器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver>
        <property name="maxUploadSize" value="5242880"></property>    
    </bean>

第四步：后台處理

@RequestMapping("/upload")
public class UploadController {

    @Resource
    private UploadService uploadService;
    
    @SuppressWarnings("deprecation")
    @RequestMapping("/uploadPic.do")
    public void uploadPic(MultipartFile pic,HttpServletRequest 
    request,HttpServletResponse response) throws Exception{
        <!--形參上的pic必須和前台頁面的傳遞的<input>標簽的name中的值一樣-->    
        
        
        <!--這里是調用方法保存圖片-->
        String path=uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename());
        
        //圖片回顯
        String allUrl=XinbabaConstants.IMG_URL+path;
        JSONObject  jsonObject=new JSONObject();
        jsonObject.put("allUrl", allUrl);  //圖片完整url
        jsonObject.put("imgUrl", path);          //圖片部分URL
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().write(jsonObject.toString());
    }

}

說明：將json對象返回，在前台通過j操作將值圖片地址添加到<img>標簽中 至此圖片就算回顯完成，下面的操作就是將圖片添加到服務器中，也就是說的保存圖片

第五步：保存圖片到fastDFS服務器上

service層

/**
     * 附件上傳至FastDFS
     */
    @Override
    public String uploadPic(byte[] file_buff, String filename) throws Exception {
        <!--調用fastDFS工具完成圖片上傳  file_fuff是文件的字節數組，finame 文件的直實名稱-->
        String path = FastDFSUtil.uploadPicToFDFS(file_buff, filename);
        
        return path;  //返回圖片的路徑
    }

• 編寫fastUtls工具類

• public class FastDFSUtil {
  
      public static String uploadPicToFDFS(byte[] file_buff,String filename) throws Exception{
          //1.創建classPathResouce對象，用於加載配置文件
          ClassPathResource resource = new ClassPathResource("fdfs_client.conf");
          //2.初始化配置文件
          ClientGlobal.init(resource.getClassLoader().getResource("fdfs_client.conf").getPath());
          //3.獲取跟蹤服務器的客戶端 
          TrackerClient trackerClient = new TrackerClient();
          //4.通過跟蹤服務器的客戶端獲取服務端 
          TrackerServer trackerServer = trackerClient.getConnection();
          //5通過跟蹤服務器的服務端獲取存儲服務器的客戶端 
          StorageClient1 storageClient1 = new StorageClient1(trackerServer,null);
          //6.將附件上傳至FastDFS
          String  file_ext_name=FilenameUtils.getExtension(filename);
          String path=storageClient1.upload_file1(file_buff, file_ext_name, null);
          return path;
      }
  }

  到此就完了，這只是一個初步fastDFS的用法，他到底有什么深入的功能還不是很懂，還有待研究，希望能同學能給夠能予幫助提出

• 前端使用jquery.form 是jquery提供的是一個很好用的js插件。更多使用可以查看官網或者其他的網站。