salesforce零基礎學習（八十九）使用 input type=file 以及RemoteAction方式上傳附件

在classic環境中,salesforce提供了<apex:inputFile>標籤用來實現附件的上傳以及內容獲取。salesforce 零基礎學習（二十四）解析csv格式內容中有相似的使用此標籤進行解析附件內容，後臺只要聲明String類型變量用來存儲附件名稱，Blob類型變量用來存儲附件的內容便可。

可是當咱們的項目總體使用第三方的前端框架，例如VUE或者angular等前端框架時，有時使用apex:inputFile反而不是很方便，須要用到html的原生的附件上傳的標籤<input type="file"/>實現附件的上傳。下面的demo用來實現使用 remote action方式實現Attachment的添加操做。

 本篇主要經過 JavaScript中的FileReader對象，將文件進行base64編碼，而後後臺進行base64解碼來實現Blob對象傳遞到後臺。

一.AddAttachmentByInputFileController: 後臺RemoteAction用來實現附件上傳，構造函數中hardcode搜索出一個指定的Account

 1 public with sharing class AddAttachmentByInputFileController {  2     public String accountId{ get; set; }  3     public AddAttachmentByInputFileController() {  4         Account testAccount = [SELECT Id  5  FROM Account  6                                 WHERE Name = 'york zhang'];  7         accountId = testAccount.Id;  8  }  9  @RemoteAction 10     public static String testAddAttachment(String attachmentName,String attachmentBody,String parentId) { 11  String operateResult; 12         Attachment tmpAttachment = new Attachment(); 13         tmpAttachment.Name = attachmentName; 14         tmpAttachment.Body = EncodingUtil.base64Decode(attachmentBody); 15         tmpAttachment.ParentId = parentId; 16         try { 17  insert tmpAttachment; 18             operateResult = 'Successfully'; 19         } catch (Exception e){ 20             operateResult = 'Failed'; 21  } 22         return operateResult; 23  } 24 }

二.AddAttachmentByInputFile:  VF頁面實現上傳附件，解析以及調用後臺保存到指定Account上。其中要注意的是Base64編碼之後，對文件大小有限制，使用input type file最大上傳大小爲4.3M。javascript中使用FileReader對數據進行二進制處理。

 1 <apex:page controller="AddAttachmentByInputFileController">
 2     <script type="text/javascript">
 3         function saveAttachment() {  4 
 5             var maxFileSize = 4350000; //Base64 編碼之後最大的文件字節數
 6             var attachmentBody; //附件內容
 7             var attachmentName; //附件名稱
 8             var fileSize; //附件大小
 9 
10             var testFiles = document.getElementById('testAttachment').files; 11             var testFile = testFiles[0]; 12 
13             if(testFile != undefined) { 14                 if(testFile.size <= maxFileSize) { 15  attachmentName = testFile.name; 16                     var fileReader = new FileReader(); 17  fileReader.onloadend = function(e) { 18  attachmentBody = window.btoa(this.result); //Base 64 encode the file
19  fileSize = attachmentBody.length; 20                             
21  Visualforce.remoting.Manager.invokeAction( 22                       '{!$RemoteAction.AddAttachmentByInputFileController.testAddAttachment}', 23  attachmentName, 24  attachmentBody, 25                       '{!accountId}', 26                       function(result,event) { 27  alert(result); 28  }); 29                       
30  } 31  fileReader.onerror = function(e) { 32  alert("上傳失敗，請從新嘗試"); 33  } 34  fileReader.onabort = function(e) { 35  alert("上傳失敗，請從新嘗試"); 36  } 37                
38  fileReader.readAsBinaryString(testFile); 39                
40  } else { 41  alert("Base64 編碼最大容許4.3M文件"); 42                     
43  } 44  } else { 45  alert("請先選擇一個附件上傳。"); 46                 
47  } 48  } 49     </script>
50     <input type="file" id="testAttachment" value="" filename="testAttachment"/>
51     <br/>
52     <input type="Button" value="Attach" onclick="saveAttachment()"/>
53 </apex:page>

結果展現：

1.上傳一個文件，點擊Attach按鈕，提示上傳成功。

2.找到對應的Account，附件已經成功綁定上傳。

總結：此篇主要描述使用 input type=file時，salesforce針對上傳附件的處理。篇中還有好多的地方能夠優化，好比 javascript remoting也有最大的傳輸限制，String字符串也有最長的限制， FileReader不是全部的瀏覽器都兼容。這些細節處理感興趣的能夠本身優化一下。