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不是所有的浏览器都兼容。这些细节处理感兴趣的可以自己优化一下。

巴特西

salesforce零基础学习（八十九）使用 input type=file 以及RemoteAction方式上传附件

最新文章

热门文章