使用 VF 页面和 Apex 将图像上传到 S3

Question

我尝试创建将图像发送到 Amazon S3 存储桶的 Visualforce 页面和 Apex，虽然它上传成功但是当我使用来自亚马逊的 link 查看图像时它显示框而不是实际上传的图像.见下图

这是我的 Visualforce 代码，它使用 javascript:

将文件发送到顶点

<input class="slds-input-custom" id="logo" name="bsLogo" type="file" />
<button id="submtBtn" onclick="toSubmit()" label="Submit" title="Submit" class="cSubmit"  >Submit</button>
<apex:form id="formId">
    <apex:actionFunction name="setParamAF" action="{!apexMethod}" rerender="panelId" status="checkingId" oncomplete="onloadCallback();">
            <apex:param name="vBusiLogo" value=""/>
    </apex:actionFunction>
</apex:form>

<script>
   function toSubmit(){
           reader.readAsDataURL(document.getElementById('logo').files[0]);
           reader.onload = function(){
                 var dataURL = reader.result;
           setParamAF(dataURL);
    };
   }
   function onloadCallback(){
       alert('uploaded');
   }
</script>

dataURL 变量具有以下 base64 值：

在 Apex class 端，我有这个代码：

String busiLogo = '';
public static void apexMethod(){
  busiLogo = ApexPages.currentPage().getParameters().get('vBusiLogo');
  String logoName = 'image.png';
  String bucketname ='amazon-file-s3';
  String host = 's3-ap-sample-1.amazonaws.com';

  Blob beforeblob = Blob.valueOf(busiLogo);
  String attachmentBody = EncodingUtil.base64Encode(beforeblob);
    HttpRequest req = new HttpRequest();
    req.setMethod('PUT');
    req.setEndpoint('callout:AmazonS3' + '/' + logoName);
    req.setHeader('Host', bucketname + '.' + host);
    req.setHeader('Content-Length', String.valueOf(attachmentBody.length()));
    req.setHeader('Content-Encoding', 'UTF-8');
    req.setHeader('Content-Type','image/png');
    req.setHeader('Connection', 'keep-alive');
    req.setHeader('Date', formattedDateString);
    req.setHeader('ACL', 'public-read-write');
    Blob blobFile = EncodingUtil.base64Decode(attachmentBody);
    req.setBodyAsBlob(blobFile);
    
    Http http = new Http();
    HTTPResponse res = http.send(req);
}

你能帮助我如何将我的实际图像发送到 s3 文件，或者我的代码哪里出了问题？

Answer 1

我想通了，因为 busiLogo 变量是 base64 编码的，我可以解码它并从中删除 "data:image/png;base64"。然后对值进行编码并将编码后的 blob 值发送到 S3。

使用 VF 页面和 Apex 将图像上传到 S3

Uploading image using VF page and Apex to S3

amazon-s3

salesforce

apex

visualforce