SharePoint Online REST - 通過JavaScript/AJAX上傳圖片

Question

我試圖使用原生JavaScript/jQuery將圖片上傳到SharePoint - 不是SP.RequestExecutor。

我已經破解了認證問題，很好很容易，所以現在只是一個解決如何上傳二進制文件的例子。如果我在文件中添加純文本，它會很好地上傳，它只是我遇到的二進制數據。

我的代碼到目前爲止包括在下面。 getToken()做它的事情，並留下一個有效的摘要對象使用。另外請注意，我已用*的空白表示文檔庫名稱。

function PerformUpload(fileName, fileData) {  
    getToken(); 
    $.ajax({ 
     url: siteFullUrl + 
     "/_api/web/GetFolderByServerRelativeUrl('/*****/')/Files" + 
     "/Add(url='" + fileName + "', overwrite=true)", 
     type: "POST", 
     async: false, 
     data: fileData, 
     processData: false, 
     contentType: "application/json;odata=verbose", 
     headers: { 
      "Accept": "application/json;odata=verbose", 
      "X-RequestDigest": digest 
     }, 
     success: function (data) { 
      alert("Success"); 
     }, 
     error: function (err) { 
      alert("Error: \r\n" + JSON.stringify(err)); 
     } 
    }); 
} 

我已經嘗試了不同的值的多種組合的contentType，設置binaryStringRequestBody: true但圖像仍然是腐敗的，當涉及到SharePoint。

我此刻的代碼文件解析成二進制是

var reader = new FileReader(); 
reader.onload = function (result) { 
    var fileName = '', 
    libraryName = '', 
    fileData = ''; 

    var byteArray = new Uint8Array(result.target.result) 
    for (var i = 0; i < byteArray.byteLength; i++) { 
     fileData += String.fromCharCode(byteArray[i]) 
    } 
    PerformUpload("image.jpg", fileData); 
}; 
reader.readAsArrayBuffer(fileInput); 

的文件正在上傳到SharePoint，但如果我嘗試並查看或下載它的損壞。

任何人都可以提供關於正確的方式上傳二進制文件到SharePoint的任何指導？我應該提到，如果我替換（在ajax調用）data: fileData,與data: "A simple string",文件上傳，當我下載它時，文件的內容是A simple string。

Answer 1

如果您使用SP.RequestExecutor將文件上傳到SharePoint，則必須將ArrayBuffer轉換爲一個字符串，然後可以將其設置爲POST操作的主體。 See details here指導您如何使用REST通過SP.RequestExecutor將文件上傳到SharePoint。

如果您將解析後的文件與Jquery.Ajax一起使用爲二進制文件，則圖像在進入SharePoint時會損壞。還注意到FileReader對象接受異步加載的文件信息。 onload和onerror事件在文件加載成功或失敗時觸發。我們應該保留onload事件的默認進程，並在的事件發生前得到結果事件。

我嘗試了以下文章和它的工作：

How to: Upload a file by using the REST API and jQuery

對於簡單的，這裏是我是如何實現：

var fileInput = jQuery('#getFile'); 
var file = fileInput[0].files[0]; 
var serverRelativeUrlToFolder = '*****'; //if the library in subsite, You have to remove the forward slash "/" before the document library relative url. 
proccessUploadUsingJQueryAjax(file, serverRelativeUrlToFolder); 

function getFileBuffer(file) { 
    var deferred = jQuery.Deferred(); 
    var reader = new FileReader(); 
    reader.onloadend = function (e) { 
      deferred.resolve(e.target.result); 
    } 
    reader.onerror = function (e) { 
      deferred.reject(e.target.error); 
    } 
    reader.readAsArrayBuffer(file); 
    return deferred.promise(); 
} 
function addFileToFolderUsingJQueryAjax(fileName, arrayBuffer, serverRelativeUrlToFolder) { 
     // Construct the endpoint. 
     var fileCollectionEndpoint = String.format(
       "{0}/_api/web/GetFolderByServerRelativeUrl('{1}')/files/add(overwrite=true, url='{2}')", 
       _spPageContextInfo.webAbsoluteUrl, serverRelativeUrlToFolder, fileName); 

     // Send the request and return the response. 
     // This call returns the SharePoint file. 
     return jQuery.ajax({ 
      url: fileCollectionEndpoint, 
      type: "POST", 
      data: arrayBuffer, 
      processData: false, 
      contentType: "application/json;odata=verbose", 
      headers: { 
       "accept": "application/json;odata=verbose", 
       "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() 
      } 
     }); 
    } 
function proccessUploadUsingJQueryAjax(file, serverRelativeUrlToFolder){ 
    var getFile = getFileBuffer(file); 
    getFile.done(function (arrayBuffer) { 
    // Add the file to the SharePoint folder. 
      var addFile = addFileToFolderUsingJQueryAjax("image.jpg", arrayBuffer, serverRelativeUrlToFolder); 
      addFile.done(function (file, status, xhr) { 
       alert("File Uploaded"); 
      }); 
      addFile.fail(function (error) { alert("Error Add File: " + error.responseText); }); 
     }); 
    getFile.fail(function (error) { alert("Error Get File: " + error.responseText); }); 
} 

請讓我知道是否能解決你的問題。

Answer 2

嘗試添加以下內容到阿賈克斯設置

transformRequest: [] 

這將阻止的Sharepoint從添加元數據到您的文件