如何将文件从 dropzone 上传到 cloudinary答案

【问题标题】：How to upload files from dropzone to cloudinary如何将文件从 dropzone 上传到 cloudinary
【发布时间】：2016-11-28 08:40:07
【问题描述】：

  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。

请帮忙

【问题讨论】：

这是客户端代码吗？看起来它包含一些不应在客户端显示的 Node.js 方法和您的凭据。您能否分享更多有关上下文的信息以及哪些似乎有效，哪些无效？
将browserify与backbone.js一起使用
您不应该使用 Node.js 进行客户端上传，而是使用 "jQuery upload plugin"。此外，此插件原生支持 Dropzone（使用 BlueImp）

标签： javascript backbone.js browserify dropzone.js cloudinary

【解决方案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

【讨论】：

【解决方案2】：

我的猜测是因为autoProcessQueue 设置为false，那么为了上传文件，您应该在将文件添加到dropzone 后调用this.processQueue();。据我了解，只有upload 才会启动。

所以快速修复您的代码将是（仅 init 函数）

 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);
        });

    }

【讨论】：