上传正确编码的文件(base64?)使用AngularJS将图像转换为SharePoint
上传正确编码的文件(base64?)使用AngularJS将图像转换为SharePoint
提问于 2015-06-14 06:31:51
我可以将图像文件上传到SharePoint，但无法将其识别为图像。根据研究，我尝试使用以下指令，说明图像在上传到SharePoint时需要进行base64编码，但它仍然上传了一个似乎已损坏的文件：https://github.com/adonespitogo/angular-base64-upload
我很乐意使用此指令，但不确定如何将所需内容传递到SharePoint的REST API中。
我的原始迭代不使用此指令，但更多的是直接上传尝试。
我需要实现的内容如下：
1)上传成功，图片不被破坏，是否需要base64编码/如何实现？
2)根据图片的名称(而不是"test.jpg")上传图片，并提供一些元数据(例如：上传带有其所属职务或部门名称的图片)
迭代1:没有指令路由这里是我的超文本标记语言(请注意，控制器通过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);
});
}更新：我相信这个问题与我在SharePoint上的$http帖子有关。使用上面提到的指令，我可以输出base64，但不确定如何将其传递到我的帖子中以供上传。
HTML 2: Using Directive Here是我当前使用https://github.com/adonespitogo/angular-base64-upload指令的：
<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:使用.ajax如下所示，它将成功发布图像，但当使用$http时，它会损坏图像。
迭代3:使用.Ajax (works)
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);
}回答 1
Stack Overflow用户
发布于 2015-06-14 19:21:14
是的，你必须做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>在你的例子中，你可以使用这个来表示上传的图片：
<img ng-src="data:image/jpeg;base64,{{data.Photo}}" id="photo-id"/>我只是不确定多个上传，但对于单次上传，它对我很好。
希望这篇文章能帮助你解决SharePoint的问题。
祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30824211
复制相关文章
相似问题