使用AngularJS將正確編碼的（base64？）圖像上傳到SharePoint

Question

我可以將圖像文件上傳到SharePoint，但它不被識別爲圖像。我試圖利用以下基於指令的指令，指出上載到SharePoint時圖像需要進行base64編碼，但仍會上傳看起來已損壞的文件：https://github.com/adonespitogo/angular-base64-upload

我很樂意使用此指令，但是不確定如何將我需要的內容傳遞給SharePoint的REST API。

我原來的迭代沒有使用這個指令，而是更直接的上傳嘗試。

我需要達到如下：

1）成功上傳圖像而不會被「破壞」了，這確實需要base64編碼/我該如何實現這一目標？

2）通過其名稱（而不是「test.jpg放在」上傳的圖像），並有一些元數據（例如上傳與它所屬的標題或部門名稱的圖像）

迭代1：無指令 這裏是我的HTML（請注意，控制器通過NG-路線聯繫在一起的頁面）：

<div class="col-md-12"> 
     <form> 
      <input type="file" onchange="angular.element(this).scope().filesChanged(this)" data-ng-model="files" multiple> 
      <button data-ng-click="upload()">Submit</button> 
      <li data-ng-repeat="file in files">{{file.name}}</li> 
     </form>    
    </div> 

這裏是我的控制器：

$scope.filesChanged = function (elm) { 
     $scope.files = elm.files 
     $scope.$apply(); 
    } 
    $scope.upload = function() { 
     var fd = new FormData() 
     angular.forEach($scope.files,function(file){ 
      fd.append('file',file) 
     }) 
      $http.post("/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='test.jpg',overwrite='true')", fd, 
        { 
         transformRequest: angular.identity, 
         headers: { 
          'Content-Type':undefined, 'X-RequestDigest': $("#__REQUESTDIGEST").val()} 
       }).success(function (d) { 
        console.log(d); 
       }); 
      } 

更新：我相信這個問題是孤立的，我的$ http發佈到SharePoint。使用上面提到的指令，我可以輸出base64，但我不確定如何將它傳遞到我的帖子上傳。

迭代2：使用指令 下面是使用https://github.com/adonespitogo/angular-base64-upload指令我目前的HTML：

<form> 
<input type="file" data-ng-model="files" base-sixty-four-input> 
<button data-ng-click="upload()">Submit</button> 
</form> 

我的控制器被損壞的圖像文件發佈到SharePoint：

$scope.upload = function() { 
     console.log($scope.files); // Output result from upload directive 
     $http({ 
      method: 'POST', 
      url: "/sites/ens/_api/web/lists/getByTitle('Report Images')/RootFolder/Files/add(url='" + $scope.files.filename +"',overwrite='true')", 
      headers: { 
       'Content-Type': false , 
       'X-RequestDigest': $("#__REQUESTDIGEST").val() 
      }, 
      data: $scope.files, 
     }).success(function (data) { 
      console.log(data); 
     }); 
    } 

更新2：如下所示使用SP.RequestExecutor可創建相同的結果。文件上傳但不能渲染。發生這種情況的圖像和文檔：

迭代3：使用指令和SP.RequestExecutor

$scope.upload = function() { 
    var dataURL = 'data:' + $scope.files.filetype + ';' + 'base64,' + $scope.files.base64; 
    var createitem = new SP.RequestExecutor("/sites/asite"); 
    createitem.executeAsync({ 
     url: "/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='" + $scope.files.filename + "')", 
     method: "POST", 
     binaryStringRequestBody: true, 
     body: dataURL, 
     success: fsucc, 
     error: ferr, 
     state: "Update" 
    }); 

    function fsucc(data) { 
     alert('success'); 
    } 
    function ferr(data) { 
     alert('error\n\n' + data.statusText + "\n\n" + data.responseText); 
    } 
} 

更新3：使用阿賈克斯如下，它會成功發佈的圖像，但使用時$ http，它會破壞圖像。

迭代3：使用阿賈克斯（作品）

function uploadFileSync(spWebUrl , library, filename, file) 
    { 
     var reader = new FileReader(); 
     reader.onloadend = function(evt) 
     { 
      if (evt.target.readyState == FileReader.DONE) 
      { 
       var buffer = evt.target.result; 
       var completeUrl = spWebUrl 
        + "/_api/web/lists/getByTitle('"+ library +"')" 
        + "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?" 
        + "@TargetLibrary='"+library+"'&@TargetFileName='"+ filename +"'"; 

       $.ajax({ 
        url: completeUrl, 
        type: "POST", 
        data: buffer, 
        async: false, 
        processData: false, 
        headers: { 
         "accept": "application/json;odata=verbose", 
         "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
         "content-length": buffer.byteLength 
        }, 
        complete: function (data) { 
         //uploaded pic url 
         console.log(data.responseJSON.d.ServerRelativeUrl); 
         $route.reload(); 
        }, 
        error: function (err) { 
         alert('failed'); 
        } 
       }); 

      } 
     }; 
     reader.readAsArrayBuffer(file); 
    } 

迭代4：使用$ HTTP（腐化圖像）

function uploadFileSync(spWebUrl , library, filename, file) 
{ 
    var reader = new FileReader(); 
    reader.onloadend = function (evt) { 
     if (evt.target.readyState == FileReader.DONE) { 
      var buffer = evt.target.result; 
      var completeUrl = spWebUrl 
       + "/_api/web/lists/getByTitle('" + library + "')" 
       + "/RootFolder/Files/add(url='" + filename + "',overwrite='true')?" 
       + "@TargetLibrary='" + library + "'&@TargetFileName='" + filename + "'"; 

      $http({ 
       url: completeUrl, 
       method: "POST", 
       data: buffer, 
       processData: false, 
       headers: { 
        "accept": "application/json;odata=verbose", 
        "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
        "content-length": buffer.byteLength 
       } 
      }).success(function (data) { 
       //uploaded pic url 
       //console.log(data.responseJSON.d.ServerRelativeUrl); 
       $route.reload(); 
      }).error(function (err) { 
       alert(err); 
      }); 
     } 
    }; 
    reader.readAsArrayBuffer(file); 
} 

Answer 1

是的，你必須做的base64編碼。

在此之後article，您filesChanged將是base64編碼功能：

$scope.filesChanged = function (input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 

      //Sets the Old Image to new New Image 
      $('#photo-id').attr('src', e.target.result); 

      //Create a canvas and draw image on Client Side to get the byte[] equivalent 
      var canvas = document.createElement("canvas"); 
      var imageElement = document.createElement("img"); 

      imageElement.setAttribute('src', e.target.result); 
      canvas.width = imageElement.width; 
      canvas.height = imageElement.height; 
      var context = canvas.getContext("2d"); 
      context.drawImage(imageElement, 0, 0); 
      var base64Image = canvas.toDataURL("image/jpeg"); 

      //Removes the Data Type Prefix 
      //And set the view model to the new value 
      $scope.data.Photo = base64Image.replace(/data:image\/jpeg;base64,/g, ''); 
     } 

     //Renders Image on Page 
     reader.readAsDataURL(input.files[0]); 
    } 
}; 

我給你的建議是也改變NG-模型從$ scope.files至$ scope.data.Photo至avoid problems with scope，並在您的輸入標籤中添加一個ID。 （在這種情況下，ID =「照片上傳」）

所以，你上傳HTML將看起來像：

<input type="file" onchange="angular.element(this).scope().filesChanged(this)" data-ng-model="data.Photo" id="photo-upload" multiple> 

而對於代表您上傳的PIC，你的情況，你可以使用這個：

<img ng-src="data:image/jpeg;base64,{{data.Photo}}" id="photo-id"/> 

我只是不確定是否需要進行多次上傳，但對於單次上傳，它對我來說非常有用。

希望這可以幫助你解決你的SharePoint問題。

祝你好運！