2016-09-13 58 views
0

我想上傳到cloudinary與Angular2。我正在使用這個文件滴管來做到這一點。 https://github.com/ptkach/fileDroppaCloudinary和Angular2

我不斷收到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> 

回答