Tải hình ảnh được mã hóa đúng cách (base64?) Lên SharePoint bằng AngularJS

Question

Tôi có thể tải tệp hình ảnh lên SharePoint, nhưng nó không được nhận dạng dưới dạng hình ảnh. Tôi đã thử sử dụng chỉ thị sau đây dựa trên nghiên cứu cho biết hình ảnh cần phải được mã hóa base64 khi được tải lên SharePoint, nhưng nó vẫn tải lên một tệp có vẻ bị hỏng: https://github.com/adonespitogo/angular-base64-upload

Tôi rất vui khi sử dụng chỉ thị này, nhưng không chắc chắn về cách chuyển những gì tôi cần vào REST API của SharePoint.

Lặp lại ban đầu mà tôi đã không sử dụng chỉ thị này, nhưng có nhiều nỗ lực tải lên trực tiếp hơn.

Những gì tôi cần phải đạt được như sau:

1) tải lên thành công một hình ảnh mà không có nó bị "hỏng", và điều này không đòi hỏi mã hóa base64/làm thế nào để đạt được điều này?

2) Tải lên hình ảnh bằng tên của họ (không phải là "test.jpg") và có một số siêu dữ liệu (ví dụ upload một hình ảnh với tiêu đề hoặc bộ phận tên nó thuộc về)

Iteration 1:. Không Chỉ đây là HTML của tôi (Xin lưu ý rằng bộ điều khiển được gắn liền với trang thông qua ng-route):

<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> 

đây là bộ điều khiển của tôi:

$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); 
       }); 
      } 

CẬP NHẬT: Tôi tin rằng sự cố được phân lập với $ http đăng lên SharePoint của tôi. Sử dụng chỉ thị được đề cập ở trên, tôi có thể xuất ra base64, nhưng tôi không biết cách chuyển nó vào bài đăng của tôi để tải lên.

Iteration 2: Sử dụng Chỉ thị Đây là HTML hiện tại của tôi bằng cách sử dụng https://github.com/adonespitogo/angular-base64-upload chỉ:

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

điều khiển của tôi được đăng tải các tập tin hình ảnh hỏng đến 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); 
     }); 
    } 

Cập nhật 2: Sử dụng SP.RequestExecutor như sau tạo ra kết quả tương tự. Tệp tải lên nhưng không hiển thị. Điều này xảy ra cho hình ảnh và tài liệu:

Iteration 3: Sử dụng Chỉ thị và 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); 
    } 
} 

Cập nhật 3: Sử dụng .ajax như sau, nó sẽ thành công đăng hình ảnh, nhưng khi sử dụng $ http, nó làm hỏng hình ảnh.

Iteration 3: Sử dụng .ajax (công trình)

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); 
    } 

Iteration 4: Sử dụng $ http (hư ảnh)

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

Vâng, bạn phải thực hiện mã hóa base64.

Sau article này, bạn filesChanged sẽ hàm cho mã hóa 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]); 
    } 
}; 

Lời khuyên của tôi đối với bạn cũng là để thay đổi ng-mô hình từ $ scope.files-$ scope.data.Photo đến avoid problems with scope và thêm id vào thẻ nhập của bạn. (Trong trường hợp này id = "hình ảnh tải lên")

Vì vậy, HTML của bạn để tải lên sẽ trông giống như:

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

Và đối với đại diện pic tải lên của bạn, trong trường hợp của bạn, bạn có thể sử dụng này:

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

Tôi không chắc chắn về việc tải lên nhiều lần, nhưng đối với tải lên một lần, nó hoạt động tốt cho tôi.

Hy vọng điều này sẽ giúp bạn giải quyết vấn đề của mình với SharePoint.

Chúc may mắn!