在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 = attachment.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不是所有的瀏覽器都相容。這些細節處理感興趣的可以自己優化一下。