HTML頁面：

<table class="form" id="form">
    ...略
    <tr>
    <td class="formTitle">頭像圖片</td>
    <td class="formValue">
        <input class="change" type="file" @change="handleFileChange" ref="inputer" isvalid="yes"/>
    </td>
    </tr>
    <tr>
        <td></td>
        <td id="showHptPic">
        <!-- 置入預設頭像，如果有上傳過頭像，則顯示自己的頭像圖片 -->
        <img id='pic' src='/images/touxiang-default_icon.png'>
        </td>
    </tr>
    ...略
</table>
 

 表單裡選擇圖片檔案，並預覽，表單填完後和其他資訊一起點確認，提交，提交方法在vue裡

JS檔案：

//只貼出關鍵程式碼
var vm = new Vue({
    el:'#dpLTE',
    data: {
        UploadFile: {
            file: null,//儲存從html傳來的圖片檔案
            relatedId:null,//資料庫中與外表連線的Id
            relatedType:1 //1型別 為上傳頭像圖片
        }
    },
    methods : {
            //選擇檔案後，預覽圖片
        handleFileChange (e) {
            let inputDOM = this.$refs.inputer;
            // 通過DOM取檔案資料
            this.UploadFile.file = inputDOM.files[0];
            var objUrl = this.getObjectURL(this.UploadFile.file) ; //獲取圖片的路徑，該路徑不是圖片在本地的路徑
            if (objUrl) {
                $("#pic").attr("src", objUrl) ; //將圖片路徑存入src中，預覽出圖片
            }
        },

 //建立一個可存取到該file的url
        getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        },
    acceptClick: function() {
        //圖片檔案不為空時,上傳圖片
        if(vm.UploadFile.file!=null && vm.UploadFile.relatedId!=null){
        //這裡也是搞了我很久，引數傳不過去,查了很久才知道：攜檔案和屬性傳參需要使用formData
		var formData = new FormData();
		formData.append('file',vm.UploadFile.file);
		formData.append('relatedType',vm.UploadFile.relatedType);
		formData.append('relatedId',vm.UploadFile.relatedId);
		$.ajax({
			url :  '../../public/uploadFile/upload?_' + $.now(),
			type : "post",
			processData : false,//告訴jQuery不要去處理髮送的資料 
			contentType : false,// 告訴jQuery不要去設定Content-Type請求頭
			data :formData,
			success: function(){
				console.log("上傳頭像成功！");
			}
		});
    }
})
 

1）首先選擇檔案後會觸發  handleFileChange (e)  方法，通過給img的src賦值，來預覽你選中的圖片檔案

2）點選確定的時候，先驗證檔案是否已選擇、和外來鍵關聯的Id是否為空（我這的id可以理解為user表的id，與之對應的relatedId），如果未選中檔案或者id為空，則不上傳檔案只儲存表單填寫的其他資訊

3）new一個formData，用來儲存上傳的檔案file（file型別）、檔案型別relatedType（int型別）、外來鍵關聯Id  relatedId（String型別），然後用ajax把資料一起丟給controller的upload方法，儲存到資料庫，

存這個檔案的相對路徑：uploads/xxx001.jpg

                         檔名：xxx.jpg

                     檔案型別：1（1為頭像）

                         外來鍵Id：1（user表id為1的使用者）

還可以存上傳時間、備註、圖片型別啊啥的...

注意不要漏寫processData : false,//告訴jQuery不要去處理髮送的資料 
                     contentType : false,// 告訴jQuery不要去設定Content-Type請求頭

否則會報錯或者接收不到傳過去的值

emmmm，直接丟到大牛寫好的工具裡，上傳成功！

方法名：

@RequestMapping(value="upload" ,method=RequestMethod.POST)
public JSONObject upload(HttpServletRequest request, HttpServletResponse response, MultipartFile file, int relatedType, String relatedId){