我可以将图像文件上传到SharePoint,但它不被识别为图像。我试图利用以下基于指令的指令,指出上载到SharePoint时图像需要进行base64编码,但仍会上传看起来已损坏的文件:https://github.com/adonespitogo/angular-base64-upload使用AngularJS将正确编码的(base64?)图像上传到SharePoint
我很乐意使用此指令,但是不确定如何将我需要的内容传递给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);
}
没有这样的运气。它在这条线上的“无法设置属性”照片“未定义或空引用”失败:$ scope.data.Photo = base64Image.replace(/ data:image \/jpeg; base64,/ g,'') ; – Kode
在控制器的顶部,尝试初始化_ $ scope.data_作为对象:** $ scope.data = {} ** – arman1991
这个问题似乎与我发布数据有关。你可以看看我的上传功能,看看它为什么不传递正确的数据/我特别是如何发布base64? – Kode