Cloudinary 和 Angular2

Question

我正在尝试使用 Angular2 上传到 cloudinary。我正在使用这个文件滴管来做到这一点。 https://github.com/ptkach/fileDroppa

我不断收到 400 个错误请求，缺少参数 - 文件错误。有没有人以前合作过或者有更好的解决方案上传到 cloudinary？

相关代码如下：

fileUploaded(success, response, file){
     console.log(file);
       success && console.log("uploaded - awesome", response, file);
       success || console.log("not uploaded - very bad", response, file);
   }

   filesUpdated(files) {
       console.log("Store state updated! Current state: ", files);
   }

   /**
    * CALLBACKS
    */

   /**
    * This method is called before Request happened
    * You can modify xhr confoguration in it
    * requestHeaders for example
    *
    * @param xhr
    */
   beforeRequest(xhr){
     xhr.setRequestHeader("Content-Type","undefined");
     xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
   }

   /**
    * This method allows you to make validation before file is sent
    * You can update fileName for example
    * Or you can return null and file won't be send
    *
    * @param formData
    * @returns formData or null
    */

   beforeFileUpload(formData){

     formData.set('api_key', cloudinaryCreds.api_key);
     formData.set('signature', cloudinaryCreds.signature);
     formData.set('timestamp', cloudinaryCreds.timestamp);

       return formData;
   }

   /**
    * This method is called once your drop or select files
    * You can validate and decline or accept file
    *
    * @param file
    * @returns Boolean
    */
   beforeAddFile(file){
       return true;
   }

并且在 html 中：

 <fileDroppa [dropZoneTemplate]="dropZoneTemplate"
                    [url]="'https://api.cloudinary.com/v1_1/cloud-name/auto/upload'"
                    [autoUpload]="false"
                    [showFilesList]="true"
                    [beforeRequest]="beforeRequest"
                    [beforeFileUpload]="beforeFileUpload"
                    [beforeAddFile]="beforeAddFile"
                    (filesUpdated)="filesUpdated($event)"
                    (fileUploaded)="fileUploaded($event)"
               >
               </fileDroppa>

Answer 1

更新

Cloudinary 刚刚发布了一个 Angular 2.0 库。您可以在 Angular Git 存储库的 angular_next branch 中找到源代码。您也可以使用名称为 @cloudinary/angular.

的 npm 或 yarn 安装它

npm install @cloudinary/angular

更多信息： http://cloudinary.com/blog/new_angular_sdk_for_image_management_more_than_meets_the_eye

Cloudinary 和 Angular2

Cloudinary and Angular2

angular

cloudinary