将 ngFileUpload 与 Cloudinary 一起使用
Posted
技术标签:
【中文标题】将 ngFileUpload 与 Cloudinary 一起使用【英文标题】:Using ngFileUpload with Cloudinary 【发布时间】:2017-06-17 02:02:47 【问题描述】:我正在尝试将 Cloudinary 上传参数(?)集成到 ngFileUpload 函数中。 function can be found here 允许用户上传,然后将图像拖放到页面上。我试图让该功能发挥作用,但不是像 ngFileUpload 所说的那样上传,而是试图让它像 Cloudinary 所说的那样上传。
我的控制器:
$scope.upload = function (dataUrl, name2)
console.log("name2", dataUrl);
Upload.upload(
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data:
file: Upload.dataUrltoBlob(dataUrl, name2)
,
).then(function (response)
$timeout(function ()
$scope.result2 = response.data;
console.log($scope.result2);
);
, function (response)
if (response.status > 0) $scope.errorMsg = response.status
+ ': ' + response.data;
console.log($scope.errorMsg);
, function (evt)
$scope.progress2 = parseInt(100.0 * evt.loaded / evt.total);
);
我的模板:
<div id="myModal2" class="modal">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<form name="myForm">
<div class="uploadText">Crop Image and Upload</div>
<i class="material-icons" style="position: relative; bottom: 28px; left:718px; cursor: pointer;" ng-click="vm.closeModal()">close</i>
<hr class="add-horizontal-line">
<br><br>
<div ngf-select ng-model="picFile" accept="image/*" class="buttn" style="cursor: pointer;width: 200px; position: relative; left: 295px;">
<p style="position: relative; right: 10px; bottom: 3px;">Select Picture</p>
</div>
<br>
<div ngf-drop ng-model="picFile" ngf-pattern="image/*"
class="cropArea" style="position: relative; left: 150px;">
<img-crop image="picFile | ngfDataUrl"
result-image="croppedDataUrl" ng-init="croppedDataUrl=''" >
</img-crop>
</div>
<br><br>
<div class="buttn" style="cursor: pointer; position: relative; left: 295px; bottom:16px;" ng-click="upload(croppedDataUrl, picFile.name2)"><p style="position: relative; left: 29px;">SUBMIT</p></div>
<span ng-show="result2">Upload Successful</span>
<span class="err" ng-show="errorMsg">errorMsg</span>
</form>
</div>
<footer style="background-color: RGBA(211,211,211,0.2); height: 75px; ">
<div class="buttn" style="cursor: pointer; position: relative; left: 75%; top: 12px;"><p style="margin-left: 35px;" ng-click="vm.closeModal()">DONE</p></div>
</footer>
</div>
</div>
云函数:
cloudinary.upload(file, upload_preset: 'dbyhcyty')
是否可以将这两者结合起来,让ngfileupload的crop函数运行,然后上传到cloudinary?
【问题讨论】:
【参考方案1】:已解决:
$scope.upload = function (dataUrl, name2)
console.log("name2", dataUrl);
cloudinary.upload(dataUrl, upload_preset: 'dhjgcyty')
.then(function(response)
$scope.result = response.data;
console.log($scope.result);
);
【讨论】:
以上是关于将 ngFileUpload 与 Cloudinary 一起使用的主要内容,如果未能解决你的问题,请参考以下文章