如何在SAPUI5中上载图像并将其显示在屏幕上

1楼 · 2020-09-02 13:09.采纳回答

这是我很久以前做的一个应用程序，可能会对您有所帮助。

选择文件后，必须调整大小并上传到后端系统后，然后使用/$ value显示它

根据我的理解，您想先显示自己的内容，然后再发送回去？会为您稍微更改一下代码。

我认为这是

 
 
 <工具栏>
                 ...
 
 
 
 
 
 <项目>

这是当我不得不加载应用程序并设置初始图像时：

 this.byId（" iImageTicket"）。setSrc（"/img/sap/opu/odata/sap/Z ...._ SRV/TicketPhotoSet（'" + vTicket +"'）/$ value？" +新日期（  ）.getTime（））;

 onChangeCamera：函数（oEvt）{
         var oFileUploader = oEvt.getSource（）;
         var vTicket =路径
         var aFiles = oEvt.getParameters（）。files;
         var currentFile = aFiles [0];
         oViewD.getController（）。resizeAndUpload（currentFile，{
           成功：功能（oEvt）{
           oFileUploader.setValue（""）;
          //这里图片在后端，所以我再次调用它并设置图片
           }，
           错误：功能（oEvt）{
           .....
           }
             }）;
         }，

 resizeAndUpload：函数（file，mParams）{
         var reader = new FileReader（）;
         reader.onerror =函数（e）{....}
         reader.onloadend = function（）{
             var tempImg = new Image（）;
         tempImg.src= reader.result;
         tempImg.onload = function（）{
         oView.getController（）。uploadFile（tempImg.src，mParams，file）;
         }
             }
         reader.readAsDataURL（file）;
 }，

 uploadFile：函数（dataURL，mParams，文件）{
         var xhr = new XMLHttpRequest（）;
         var BASE64_MARKER ='数据：'+ file.type +'; base64，';
         var base64Index = dataURL.indexOf（BASE64_MARKER）+ BASE64_MARKER.length;
         var base64string = dataURL.split（"，"）[1];

             xhr.onreadystatechange = function（ev）{
             如果（xhr.readyState == 4 &&（xhr.status == 200 || xhr.status == 201））{
             mParams.success（ev）;
             }否则if（xhr.readyState == 4）{
             mParams.error（ev）;
             }
             };
             var fileName =（file.name ===" image.jpeg"）？" image _" + new Date（）。getTime（）+"。jpeg"：file.name;
             xhr.open（'POST'，"/img/sap/opu/odata/sap/Z .... SRV/TicketSet（'" + vTicket +"'）/TicketPhotoSet"，true）;
             xhr.setRequestHeader（" Content-type"，file.type）;//" application/x-www-form-urlencoded"）;
             xhr.setRequestHeader（" x-csrf-token"，oView.getModel（）。getHeaders（）['x-csrf-token']）;
             xhr.setRequestHeader（" slug"，fileName）;
             var data = base64string;
             xhr.send（data）;
         }，

这对我来说很好用，并且可以说，您可以在上传后设置图像，或者在文件阅读器上访问内容并在图像上使用。

代码稍微复杂一点，因为我需要对图像进行自定义调整大小（此示例中删除了代码）

希望这会有所帮助：）