如何将文件从 dropzone 上传到 cloudinary

Posted 2023-03-25

【中文标题】如何将文件从 dropzone 上传到 cloudinary

【英文标题】：How to upload files from dropzone to 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）

【参考方案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 "[phone]);
   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);
        );