public_id未定义流星+ Cloudinary [英] public_id is not defined Meteor+Cloudinary

问题描述

使用Lepozepo：CLoudinary软件包和以下详细信息获取上述图像上传功能的错误消息。

• console.log显示成功上传和一个文件。


• 上传后没有看到图片。个人资料图片也不会更改。可能未定义的public_id，因此无法将其保存到Meteor.userId（）？


• 进度条不显示

删除按钮错误

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

以下代码： b
$ b

服务器的config.js

<$ p $ Cloudinary.config（{
cloud_name：'XX'，
api_key：'XX'，
api_secret：'XX'
}）;
Cloudinary.rules.delete = function（）{
var userId =my_user_id;
返回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（{$ b $'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 {
 
 //预览段
 $（'。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; 
 
 $进度条
 $（'。cloudinary-fileupload'）。bind（'fileuploadprogress'，函数（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 =fileid =userimagename =userimageclass ='upload_field cloudinary-fileupload'/> <！ - 按建议编辑 - > 
 <！ - 下面的进度条和缩略图预览不起作用 - > 
< div class =progress_barstyle ='background-color：red，height：20px'>< / div> 
< div class ='thumbnails'>< / div> 
 
 {{#each file}} 
< p> {{percent_uploaded}}完成了％< / p> <！ - 有效，但只显示数字 - > 
 {{/ each}} 
< button id =submit>上传< / button> 
< button id =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}}> 
  

解决方案

（集合更新已移至上传响应处理程序的内部）：

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

希望现在更有意义...

I get the above error message for image upload function using Lepozepo: CLoudinary package and the following details.

• console.log shows successful upload and a file.
• I do not see an image appearing after the upload. The profile image is also not changed. Probably undefined public_id, therefore unable to save it to Meteor.userId()?
• progress bar doesnt show up

The delete button error

3rd error message after changing delete code

The codes below:

Server's 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; };

Client - 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'  : {} }
            });
         }
      });
   }
});

Client - 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>

Client - profile.

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

Client - profile.html

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

解决方案

Following our correspondence above, please try something like the following (collection update moved to inside of the upload response handler):

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

Hope this makes more sense now...

这篇关于public_id未定义流星+ Cloudinary的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！