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

public with sharing class AddAttachmentByInputFileController {
    public String accountId{ get; set; }
    public AddAttachmentByInputFileController() {
        Account testAccount = [SELECT Id
                                FROM Account
                                WHERE Name = 'york zhang'];
        accountId = testAccount.Id;
    }
    @RemoteAction
    public static String testAddAttachment(String attachmentName,String attachmentBody,String parentId) {
        String operateResult;
        Attachment tmpAttachment = new Attachment();
        tmpAttachment.Name = attachmentName;
        tmpAttachment.Body = EncodingUtil.base64Decode(attachmentBody);
        tmpAttachment.ParentId = parentId;
        try {
            insert tmpAttachment;
            operateResult = 'Successfully';
        } catch (Exception e){
            operateResult = 'Failed';
        }
        return operateResult;
    }
}

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

<apex:page controller="AddAttachmentByInputFileController">
    <script type="text/javascript">
        function saveAttachment() {

            var maxFileSize = 4350000;      //Base64 編碼以后最大的文件字節數
            var attachmentBody;                //附件內容
            var attachmentName;                //附件名稱
            var fileSize;                     //附件大小

            var testFiles = document.getElementById('testAttachment').files;
            var testFile = testFiles[0];

            if(testFile != undefined) {
                if(testFile.size <= maxFileSize) {
                    attachmentName = testFile.name;
                    var fileReader = new FileReader();
                    fileReader.onloadend = function(e) {
                    attachmentBody = window.btoa(this.result);  //Base 64 encode the file
                    fileSize = attachmentBody.length;
                            
                    Visualforce.remoting.Manager.invokeAction(
                      '{!$RemoteAction.AddAttachmentByInputFileController.testAddAttachment}',
                      attachmentName,
                      attachmentBody,
                      '{!accountId}',
                      function(result,event) {
                        alert(result);
                      });
                      
                    }
                    fileReader.onerror = function(e) {
                      alert("上傳失敗，請重新嘗試");
                    }
                    fileReader.onabort = function(e) {
                      alert("上傳失敗，請重新嘗試");
                    }
               
                    fileReader.readAsBinaryString(testFile);  
               
                } else {
                    alert("Base64 編碼最大允許4.3M文件");
                    
                }
            } else {
                alert("請先選擇一個附件上傳。");
                
            }
        }
    </script>
    <input type="file" id="testAttachment" value="" filename="testAttachment"/>
    <br/>
    <input type="Button" value="Attach" onclick="saveAttachment()"/>
</apex:page>

結果展示：

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

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

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