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从添加元数据到您的文件