前幾天寫公司的SpreadJS控件的測試用例時遇到一個需求，不通過input標簽的type=file的形式來實現本地文件選擇，而是直接指定自己想要上傳的文件（因為模擬ui行為的測試會占用大量的時間，影響測試效率）。一開始我認為這是不可能實現的，因為瀏覽器的安全性原因，js是不能直接訪問系統文件的（node.js除外）。ie瀏覽器支持使用FileSystemObject接口來訪問本地文件，但是其他瀏覽器均沒有實現。初步方案是利用后端語言去訪問系統文件然后轉換成base64格式返回給前端，前端將base64轉成file文件。
一、后端操作
后端語言可以很輕松地去訪問本地文件，我將文件對象存入到byte數組中并轉換成了base64的字符串傳給前端。后端代碼就不寫了，很簡單。
二、前端操作
我想通過后端的base64字符串來生成File對象的實例。這里就需要了解input標簽形式的文件上傳的底層原理。
1.input生成文件對象的原理
查閱w3c的文檔得知：在 HTML 文檔中<input type="file">標簽每出現一次，一個 FileUpload 對象就會被創建。
該元素包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件。當用戶選擇了一個或多個文件點擊"打開"時，js會生成一個FileList數組來保存用戶所選擇的文件。FileList包含了一個或多個File對象。可以通過document.getElemenById("uploadFile").files來進行訪問。處于安全性的考慮，File對象不會暴露出文件的內容，它只提供了一些只讀的屬性來描述修改時間、文件類型、長度、名字等。
2.創建File對象
js有一個底層的Blob對象，它是一個包含有只讀原始數據的類文件對象。File對象就繼承自Blob對象并擴展了系統文件的支持。
Blob對象的構造函數（來自MDN）
Blob Blob(
[optional] Array parts,
[optional] BlobPropertyBag properties
);
第一個參數是一個數組，里面可以是DOMString，也可以是TypeArray或者Blob。
這里需要解釋一下TypedArray：在JS語言中，數值只有一種稱為Number的類型，而不像C語言或底層CPU指令那樣區分是整型還是浮點型，是有符號的還是無符號的，是32位的還是64位的。Typed Array的主要是為了彌補JS處理二進制格式數據的不足，利用Typed Array可以非常方便地操作二進制的數據。TypedArray包括Int32Array、Uint8Array、Float32Array等，也可以是連續的內存緩沖區ArrayBuffer或者工具類DataView。
var myFile=new Blob([u8arr],{type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
第一個參數是一個Uint8Array的TypedArray類型，它是一個8比特的無符號的int數組，通過base64轉換而來。第二參數是該文件的mime類型，不同的文件類型可以參考w3c的mime手冊。
3.base64的轉換
還剩最后一個問題，如何把base64轉成Uint8Array?
js提供了window.atob(base64)的方式對base64進行解碼。再通過charCodeAt()的方式轉成Uint類型。代碼如下
var bytes=window.atob(base64), //解碼
n=bytes.length,
u8arr=new Uint8Array(n),
while(n--){
u8arr[n]=bytes.charCodeAt(n); //將編碼轉換成Unicode編碼
}
我對這一操作做了封裝
//假設有一個xlsx文件
function createFile(urlData){
var bytes=window.atob(urlData),
n=bytes.length,
u8arr=new Uint8Array(n);
while(n--){
u8arr[n]=bytes.charCodeAt(n);
}
return new Blob([u8arr],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}});
}
var str=""; //str接收來自后端返回的base64
var myFile=createFile(str);
現在就大功告成了。前端的文件對象已經成功生成。
4.最終測試
我在代碼中創建一個鏈接去下載這個文件
var a = document.createElement("a");
a.href =window.URL.createObjectURL(myFile); //下載路徑指向這個文件對象
a.download = "SunnyChuan.xlsx";
a.click(); //指定頁面自動下載文件
document.body.appendChild(a);
頁面打開后會自動下載文件
我們把文件打開測試一下整個流程中有沒有數據損失
從圖中可以看出文件完成無損地傳到了前端。
這里有一個小插曲:用ie瀏覽器是無法下載的，因此需要做hack:、
if(navigator.appVersion.toString().indexOf(".NET")>0){
window.navigator.msSaveBlob(myFile, "SunnyChuan.xlsx");
}
else{
var a = document.createElement("a");
a.href =window.URL.createObjectURL(myFile);
a.download = "SunnyChuan.xlsx";
a.click();
document.body.appendChild(a);
}
附上完整的代碼
function createFile(urlData,fileType){
var bytes=window.atob(urlData),
n=bytes.length,
u8arr=new Uint8Array(n);
while(n--){
u8arr[n]=bytes.charCodeAt(n);
}
return new Blob([u8arr],{type:fileType});
}
var str=""; //str接收來自后端返回的base64
var fileType="";//指定mime
var myFile=createFile(str,fileType);
if(navigator.appVersion.toString().indexOf(".NET")>0){
window.navigator.msSaveBlob(myFile, "SunnyChuan.xlsx");
}
else{
var a = document.createElement("a");
a.href =window.URL.createObjectURL(myFile);
a.download = "SunnyChuan.xlsx";
a.click();
document.body.appendChild(a);
}
三、總結
js一般是不可以直接訪問本地文件的，但是可以通過一些間接的方式去實現。js的文件操作一般用于下載文件以及保存圖片。我實習的公司就是通過將產品內部的圖片轉成base64，在需要使用的時候再轉換回圖片，這種方式不需要產品附帶圖片文件，產品最終只有一個js文件，極大地減少了產品尺寸。
