javascript - 如何从dropzone上传文件到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') 没有被调用，因为我想找到要上传到 cloudinary 的 file.path。

请帮忙

Answer 1

您正在使用 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