将 ngFileUpload 与 Cloudinary 一起使用

Posted 2023-03-25

【中文标题】将 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);
            );