原因

現在主流的上傳工具大多需要依賴jQuery來使用，雖然功能強大，擴充套件性好

但是有時候吧，專案中可能不需要那麼強大的功能及擴充套件性，僅僅只需要簡單的上傳一個檔案就可以了

對於用zepto等非jQuery框架的專案來說，很多的上傳元件用不了，於是我就自己寫了一個簡易的檔案上傳指令碼

程式碼

首先說下方法引數，file是需要上傳的檔案所在的input標籤，type=file肯定是需要的

再說下原理，我是直接利用XMLHttpRequest來發送請求的，檔案由FileReader進行base64編碼，資料由FormData封裝

最後上程式碼，程式碼中會有註釋

function uploadFile(file){
	var files = file.files;
	var len = files.length; //多檔案上傳時會用到
	var reader = new FileReader();  //讀取檔案用的
	reader.onload = function(evt) {  //這個onload方法相當於是readAsDataURL方法執行後的回撥，非同步的，畢竟檔案編碼也是要時間的
	    // 新增引數
	    var formData = new FormData();  //formData的用法網上有說明
	    formData.append('file', files[0],files[0].name);  這裡的第三個引數是用來指定檔案的名字，我這裡用的是檔案本身的名字
            formData.append('size', files[0].size);
            formData.append('base64', evt.target.result);
            // 觸發上傳
            var xhr = new XMLHttpRequest();  //建立請求物件
            var uploadUrl = $("#ctx").val(); //專案路徑
            xhr.open('POST', uploadUrl+'/multipartFileUploader');  //介面地址
            xhr.send(formData);
            
            xhr.onload = function () {  //send方法的回撥
                if (xhr.status == 200) {
                var obj = eval('(' + xhr.responseText + ')');  //返回的json資料
                //請求完成以下略
                } else {
                    // 處理其他情況
                    console.log(xhr.responseText.message);
                }
            };

            xhr.onerror = function () {
                // 處理錯誤
            };

            xhr.upload.onprogress = function (e) {
                // 上傳進度
                var percentComplete = ((e.loaded / e.total) || 0) * 100;
            };
            
	}
	reader.readAsDataURL(file.files[0]); //檔案編碼
}
 

關於FileReader的用法，這篇部落格可以參考

以上是前端js部分上傳檔案的請求程式碼，接下來是後端如何獲取上傳的檔案

我用的是java語言，框架是springboot，程式碼如下

/** 上傳檔案專用介面（返回檔案路徑）  */
@PostMapping("/multipartFileUploader")
@ResponseBody
public ResponseVO multipartFileUploader(@RequestParam(value="file")MultipartFile dataFileFile) {
	String path = fileUploaderService.acceptFile(dataFileFile);
	return ResultUtil.success(path);
}
 

接下來說說我在接收檔案時所爬的坑

值得注意的地方

1、註解中的file，指的是formData中的file，key值要一致才能獲取

2、MultipartFile這個類啊，在springboot中強轉成其實現類CommonsMultipartFile時會出現型別轉換異常

public static File traMultipartFileToFile(MultipartFile mFile){
	    CommonsMultipartFile cfHeadPic= (CommonsMultipartFile)mFile; //此處會發生異常
	    DiskFileItem fi = (DiskFileItem)cfHeadPic.getFileItem(); 
	    File file = fi.getStoreLocation();
	    return file;
	}
 

另外，CommonsMultipartFile是需要匯入jar包的，我這裡也貼一下吧

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.2</version>
</dependency>

我在網上找到的解決方案如下

裡面的第一個評論很重要，需要配置一個CommonsMultipartResolver，配置類他也貼出來了，裡面有個小問題，等下再說

配好之後啟動伺服器會報錯，這個坑確實坑了我蠻久，問題出在multipart.enabled屬性上，我的專案裡不知為何這個值需要設定為false，和評論中說的不一樣，目前我還不知道為什麼

之後再啟動就可以執行專案了，可是在 File file = fi.getStoreLocation(); 這一步時報錯，說找不到檔案，我去tomcat對於的路徑上找，確實沒有，這裡就是之前配置類的小問題了，配置類中的setMaxInMemorySize這個屬性代表，當檔案小於這個屬性的值時，會將檔案放入記憶體中，大於該值時才會放入tomcat中，所以我將該值改成1，這樣一來就不會再出現tomcat找不到檔案的情況了，畢竟我並不知道怎麼從記憶體中拿檔案