我使用Lepozepo得到了以上有关图像上传功能的错误消息:CLoudinary软件包和以下详细信息。


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


javascript - 未定义public_id meteor +云-LMLPHP

删除按钮错误
javascript - 未定义public_id meteor +云-LMLPHP

更改删除代码后出现第三条错误消息
javascript - 未定义public_id meteor +云-LMLPHP

以下代码:

服务器的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}}">

最佳答案

按照上面的对应关系,请尝试以下类似的操作(集合更新已移至上载响应处理程序的内部):

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


希望现在更有意义...

关于javascript - 未定义public_id meteor +云,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40992614/

10-11 23:23
查看更多