Cloudinary和Angular2

Question

我正在尝试使用Angular2上传到cloudinary。我正在使用此文件dropper来执行此操作。 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 install @cloudinary/angular

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