public_id 未定义 Meteor+Cloudinary

Question

我收到上述关于使用 Lepozepo 上传图片功能的错误消息：CLoudinary 包和以下详细信息。

• console.log 显示成功上传和一个文件。
• 上传后看不到图像。个人资料图像也没有改变。可能是未定义的 public_id，因此无法将其保存到 Meteor.userId()？
• 进度条不显示

删除按钮错误

更改删除代码后的第三条错误消息

以下代码：

服务器的 config.js

Cloudinary.config({
  cloud_name    : 'XX',
  api_key       : 'XX',
  api_secret    : 'XX'
});
Cloudinary.rules.delete = function() {
  var userId = "my_user_id";
  return this.public_id;
};
Cloudinary.rules.signature = function() { return this.userId;};
Cloudinary.rules.private_resource = function() {return this.userId; };

客户端 - upload.js

Template.upload.onCreated(function(){
   var self = this;
   self.autorun(function(){ 
      self.subscribe('user',  Meteor.userId());    
      $.cloudinary.config({ cloud_name: "XX", api_key: 'XX'}); 
   });
});

Template.upload.events({   
   'submit form': function(e, t) { 
      e.preventDefault(); 
      var files = [];
      var file = $('#userimage')[0].files[0]; 
      files.push(file);
      console.log(files);

     Cloudinary.upload(files, {}, function(err, res) {
       if (err){
         console.log("Error: " + err + ",due to: " + err.reason);
     } else {

       // preview segment 
      $('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {  
       $('.preview').html(
         $.cloudinary.image(data.result.public_id, { format: data.result.format, version: data.result.version, crop: 'fill', width: 150, height: 100 })
        );    
        $('.image_public_id').val(data.result.public_id);    
        return true;
      });

     // progress bar
     $('.cloudinary-fileupload').bind('fileuploadprogress', function(e, data) { 
       $('.progress_bar').css('width', Math.round((data.loaded * 100.0) /        data.total) + '%'); 
    });

    Meteor.users.update({ _id: Meteor.userId() }, { 
      $set: { 'profile.profilepicId'  : res.public_id }
    });
    console.log("Success :" + res);              
  },
  'click #delete': function (public_id) {
      Cloudinary.delete("response.public_id", public_id, function(err, res){
         if(err) {
            console.log("Error: " + err + ",due to " + err.reason);
         } else { 
            console.log("Success :" + res);
            Meteor.users.update({ _id: Meteor.userId() }, { 
               $set: { 'profile.profilepicId'  : {} }
            });
         }
      });
   }
});

客户端 - upload.html

 <form>
   <input type="file" id="userimage" name="userimage" class='upload_field cloudinary-fileupload' /> <!-- edited as per suggested --> 
     <!-- the below progress bar and thumbnail preview not working --> 
     <div class="progress_bar" style='background-color: red, height: 20px'></div>
     <div class='thumbnails'></div>

       {{#each file}}
          <p> {{percent_uploaded}}% done</p> <!-- works but only shows number --> 
       {{/each}}
     <button id="submit">Upload</button>
     <button id="delete">Delete</button>
 </form>

客户 - 个人资料。

Template.profile.helpers({
   profilepicId: function (){
      var u = Meteor.user();
      return u.profile.profilepicId
   },
   file: function () {
      return Cloudinary.collection.find();
   }
});

客户端 - profile.html

<img src="{{c.url profilepicId format=format crop='thumb' width=200 height=200}}">

Answer 1

根据我们上面的通信，请尝试以下操作（集合更新移至上传响应处理程序内部）：

  Cloudinary._upload_file(files[0], {}, function(err, res) {
     if (err){
        console.log("Error: " , err, err.reason);
        return;
     } else {
        console.log("Success :" + res);
        Meteor.users.update({ _id: Meteor.userId() }, { 
            $set: { 'profile.avatar': res.public_id }
        });
     }
  }); 

希望现在这更有意义...