基於SpringMVC的上傳圖片

楓葉梨花發表於2019-02-21
SpringMVC

系統開發的時候有時候需要上傳檔案，如圖片，使用Ajax上傳跟平時的寫法稍微不一樣，這裡舉例一下。

前端展示

<form class="am-form" id="userdata">
    <div class="am-form-group">
        <input type="text" name="username" placeholder="請輸入姓名">
    </div>

    <div class="am-form-group am-form-file">
        <div>
            <button type="button" class="am-btn am-btn-default am-btn-sm">
            <i class="am-icon-cloud-upload"></i> 選擇要上傳的圖片</button>
        </div>
        <input type="file"  name="inputfile">
    </div>

    <p>
        <button type="submit" class="am-btn am-btn-primary" id="save">提交</button>
    </p>
</form>
複製程式碼

Ajax上傳

<script type="text/javascript">
    $("#save").click(function() {
        var form = new FormData($("#userdata")[0]);
        $.ajax({
            type : 'post',
            url : ...,//選擇上傳地址
            dataType : 'json',
            data : form,
            async : false,
            contentType : false, //必須
            processData : false, //必須
            error : function(result) {
        	    alert(result);
            },
            success : function(result) {
    	        if (result.code == 1) {
    	
    	        } else {
    		        alert("新增失敗");
    	    }
        }
    });
</script>
複製程式碼

FormData是HTML5的一個功能，它使得檔案上傳十分容易，當然可繼續新增其他引數：

formData.append("鍵", 值);
複製程式碼

SpringMVC的XML配置

<!-- 檔案上傳解析器 -->
<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 設定上傳檔案的最大尺寸為5MB -->
    <property name="maxUploadSize">
	    <value>5242880</value>
    </property>
</bean>
複製程式碼

後端上傳

@RequestMapping(value="/add",method=RequestMethod.POST)
@ResponseBody
public Msg addUser(@RequestParam("inputfile") MultipartFile inputfile,User user){
    if(!inputfile.isEmpty()){
        //1、獲取圖片完整名稱
        String fileStr=inputfile.getOriginalFilename();
        //2、使用隨機生成的字串+源圖片副檔名組成的新的圖片名稱，防止圖片重名
        String newFilename=UUID.randomUUID().toString()
                        +fileStr.substring(fileStr.lastIndexOf("."));
        //3、將圖片儲存到硬碟
        try {
            inputfile.transferTo(new File(path+newFilename));
        } catch (IllegalStateException | IOException e) {
            e.printStackTrace();
        }
        //4、將圖片新的名稱儲存到資料庫
        user.setPicture(newFilename);
    }
    userService.addUser(user);
    return Msg.quickSuccess();
}
複製程式碼
MultipartFile
SpringMVC可使用MultipartFile上傳檔案，它還有其他的方法，可供參考

    String getContentType()//獲取檔案MIME型別
    InputStream getInputStream()//後去檔案流
    String getName() //獲取表單中檔案元件的名字
    String getOriginalFilename() //獲取上傳檔案的原名
    long getSize()  //獲取檔案的位元組大小，單位byte
    boolean isEmpty() //是否為空
    void transferTo(File dest) //儲存到一個目標檔案中。
複製程式碼

整個上傳流程其實很簡單，只要瞭解FormData和MultipartFile就可以簡單的編寫上傳功能。

相關文章