将 blob 数据上传到 Cloudinary答案

【问题标题】：Upload blob data to Cloudinary将 blob 数据上传到 Cloudinary
【发布时间】：2017-02-07 01:34:34
【问题描述】：

我有一个 Meteor 应用程序，我正在尝试从 .epub 文件中提取一些图像，然后将它们保存到 Cloudinary，但我没有任何运气。这是我迄今为止所做的：

使用epub.js我加载.epub文件并读取图像数据：

 const book = ePub('path_to_file.epub');
 const cover = book.coverUrl();
/* cover._result returns this:
"blob:http://localhost:3000/6433bd4e-13dc-462b-b7be-e9654ad06c18"
*/

我可以手动将cover._url 分配给图像源并且图像按预期呈现：

  $('#bookImage').attr('src', cover._result)

我曾尝试像这样上传cover._result、"blob:http://localhost:3000/6433bd4e-13dc-462b-b7be-e9654ad06c18"：

  Cloudinary.upload( cover._result,{
    folder: 'Books',
    resource_type: 'raw',
  },function(err, res){ 
    if (err){ 
      console.log(err); 
    } else { 
      console.log(res);
       } 
     });

我没有得到任何回应

我也试过这个：

const myFile = new File([cover._result], "new_file.jpg", {type: "image/jpg"}); 
Cloudinary.upload( myFile,{...})

文件上传，但其垃圾数据且不可读

最后我尝试将文件转换为 base64，如下所示：

 const toDataUrl = function(cover, callback) {
 const xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', cover);
  xhr.send();
}

/******************/
      toDataUrl (cover._result, function( base64Img ) {
        Cloudinary.upload( base64Img,{
          folder: 'Books',
           resource_type: 'raw',
         },function(err, res){ 
            if (err){ 
              console.log(err); 
            } else { 
              console.log(res);
            } 
        });
    })

Cloudinary.upload 函数没有响应。

我的问题是，Cloudinary 是否支持这种类型的功能？

谢谢。

已解决

这是 Meteor 包本身的问题。

我不得不改变这个：

  toDataUrl (cover._result, function( base64Img ) {
    Cloudinary.upload( base64Img,{
      folder: 'Books',
       resource_type: 'raw',
     },function(err, res){ 
        if (err){ 
          console.log(err); 
        } else { 
          console.log(res);
        } 
    });
})

到这里：

  toDataUrl (cover._result, function( base64Img ) {
    Cloudinary._upload_file( base64Img,{
      folder: 'Books',
     },function(err, res){ 
        if (err){ 
          console.log(err); 
        } else { 
          console.log(res);
        } 
    });
})

并且上传的图片数据没有问题。

【问题讨论】：

嗨，你在这里使用什么库：Cloudinary.upload(...);它是什么 npm 包？ :)

标签： javascript image meteor blob cloudinary

【解决方案1】：

我不得不改变这个：

  toDataUrl (cover._result, function( base64Img ) {
    Cloudinary.upload( base64Img,{
      folder: 'Books',
       resource_type: 'raw',
     },function(err, res){ 
        if (err){ 
          console.log(err); 
        } else { 
          console.log(res);
        } 
    });
})

到这里：

  toDataUrl (cover._result, function( base64Img ) {
    Cloudinary._upload_file( base64Img,{
      folder: 'Books',
     },function(err, res){ 
        if (err){ 
          console.log(err); 
        } else { 
          console.log(res);
        } 
    });
})

【讨论】：