如何從懸浮窗文件上傳到cloudinary

Question

var myDropzone = new Dropzone("#product-image-drpzone", { 
     // Prevents Dropzone from uploading dropped files immediately 
     autoProcessQueue: false, 
     addRemoveLinks: true, 
     autoQueue: false, 
     acceptedFiles: '.jpg,.png,.jpeg,.gif', 
     url: 'https://api.cloudinary.com/v1_1/something/image/upload', //put it in the main url file once done 
     maxfilesexceeded: function (file) { 
      ToasterWrapper.errorMessage('You have uploaded more than 4 images!', false); 
      return; 
     }, 
     init: function() { 
      // You might want to show the submit button only when 
      // files are dropped here: 
      myDropzone = this; 
      var imagesArr = []; 
      cloudinary.config({ 
       cloud_name: '', 
       api_key: '737587394822762', 
       api_secret: '' 
      }); 

      this.processQueue(); 

      this.on("addedfile", function (file) { 
       var myDropzone = this; 
       $(".dz-progress").remove(); 

       console.log(file); 
       cloudinary.uploader.upload(file, function (result) { 
        console.log(result) 
        imagesArr.push(result.public_id); 
       }, 
        { use_filename: true }); 
       $('#btn-remove').click(function() { 
        myDropzone.removeAllFiles(); 
       }); 
      }); 

      this.on("sending", function (file, xhr, data) { 
       console.log(file.path); 
      }); 

     } 
    }); 

的this.on('sending')不會被調用，因爲我想找到file.path被上傳到cloudinary。

請幫

Answer 1

我的猜測是因爲autoProcessQueue設置爲false，那麼爲了上傳文件，你應該叫this.processQueue();該文件已被添加到dropzone後。據我的理解，只有upload開始。

所以快速修復您的代碼將是

init: function() { 
     // You might want to show the submit button only when 
     // files are dropped here: 
     myDropzone = this; 
     var imagesArr = []; 
     cloudinary.config({ 
      cloud_name: '', 
      api_key: '737587394822762', 
      api_secret: '' 
     }); 


     /// this.processQueue(); // remove this from here 

     var myDropzone = this; 
     //add start uploading button to the u.i and hook for clicks on it 
     $('#btn-start').click(function() { 
       myDropzone.processQueue(); // only then start to upload 
     }); 

     //this can be hooked without the need for waiting for the added file event 
     $('#btn-remove').click(function() { 
       myDropzone.removeAllFiles(); 
     }); 

     this.on("addedfile", function (file) { 
      var myDropzone = this; 
      $(".dz-progress").remove(); 

      console.log(file); 
      cloudinary.uploader.upload(file, function (result) { 
       console.log(result) 
       imagesArr.push(result.public_id); 
      }, 
       { use_filename: true }); 



     }); 

     this.on("sending", function (file, xhr, data) { 
      console.log(file.path); 
     }); 

    } 

Answer 2

您正在使用cloudinary JS庫上傳您的文件和dropzone.js的方法來監聽事件（僅初始化函數）。

cloudinary.uploader.upload(file, function (result) { 
    console.log(result) 
    imagesArr.push(result.public_id); 
} 

此上傳功能不註冊任何事件dropzone.js，所以你可以不聽像sending, success, complete事件等，基本上你是混合2個庫。因此，如果您想使用dropzone並收聽它提供的事件，請單獨使用它。下面是如何使用dropzone到cloudinary上傳 -

var myDropzone = new Dropzone(document.getElementById('dropzone-area'), { 
    uploadMultiple: false, 
    acceptedFiles:'.jpg,.png,.jpeg,.gif', 
    parallelUploads: 6, 
    url: 'https://api.cloudinary.com/v1_1/cloud9/image/upload' 
}); 
myDropzone.on('sending', function (file, xhr, formData) { 
     alert("you added a file"); 
    }); 
myDropzone.on('sending', function (file, xhr, formData) { 
    console.log("Adding api key "+123456789123456); 
    formData.append('api_key', 123456789123456); 
    formData.append('timestamp', Date.now()/1000 | 0); 
    formData.append('upload_preset', 'presetname'); 
}); 
myDropzone.on('success', function (file, response) { 
    console.log('Success! uploading file to Cloudinary. public id - '+response.public_id); 
}); 

如果你想活生生的例子https://plnkr.co/edit/Bm5x8jhBQNZkpz26oViw?p=preview