将 Canvas 传递给 FineUploader 无效

Question

我正在将 base64 图像字符串转换为 canvas，然后将其传递给 FineUploader，但它会引发错误。这是我的代码：

dataURItoCanvas(uploadValue.base64String,
  function(canvas) {
    console.log(canvas);
    $('#uploader').fineUploader('addFiles', canvas);
  });

function dataURItoCanvas(dataURI, onsuccess) {
  var img = new Image();

  img.onerror = onerror;
  img.onload = function onload() {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    if (onsuccess) {
      onsuccess(canvas);
    }
    //canvas.toBlob(onsuccess);
  };
  img.src = dataURI;
  img.style = "display:none;";
  document.body.appendChild(img);
}

它抛出这个错误：

[FineUploader 4.2.2] Received 0 files or inputs.
jquery.fineuploader-4.2.2.min.js:16 Uncaught TypeError: Cannot read property 'file' of undefined
    at qq.FineUploader._prepareItemsForUpload (jquery.fineuploader-4.2.2.min.js:16)
    at qq.FineUploader._prepareItemsForUpload (jquery.fineuploader-4.2.2.min.js:17)
    at qq.FineUploader.addFiles (jquery.fineuploader-4.2.2.min.js:16)
    at e.fn.init.j (jquery.fineuploader-4.2.2.min.js:19)
    at HTMLDivElement.<anonymous> (jquery.fineuploader-4.2.2.min.js:19)
    at Function.each (VM259 jquery-1.10.2.min.js:4)
    at e.fn.init.each (VM259 jquery-1.10.2.min.js:4)
    at e.fn.init.a.fn.fineUploader (jquery.fineuploader-4.2.2.min.js:19)
    at 59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4526
    at HTMLImageElement.onload (59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4556)
_prepareItemsForUpload @ jquery.fineuploader-4.2.2.min.js:16
_prepareItemsForUpload @ jquery.fineuploader-4.2.2.min.js:17
addFiles @ jquery.fineuploader-4.2.2.min.js:16
j @ jquery.fineuploader-4.2.2.min.js:19
(anonymous) @ jquery.fineuploader-4.2.2.min.js:19
each @ VM259 jquery-1.10.2.min.js:4
each @ VM259 jquery-1.10.2.min.js:4
a.fn.fineUploader @ jquery.fineuploader-4.2.2.min.js:19
(anonymous) @ 59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4526
onload @ 59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4556

对于 Blob，我也遇到同样的错误：

dataURItoCanvas(uploadValue.base64String, function (canvas) {
                                    console.log(canvas);
                                    canvas.toBlob(function (blob) {
                                        $('#uploader').fineUploader('addFiles', { files: [blob] });
                                    });
                                });

Answer 1

正如您在他们的文档中看到的那样 addFiles 从版本 4.2.2 开始不支持 CanvasWrapper。

更新到最新版本（5.x.x以上）应该没问题

作为替代方案。 addBlobs() 在 4.x.x 中（而不是 fineUploader('addFiles', { files: [] })。所以你可以做类似

canvas.toBlob(function(blob) {
   $('#uploader').addBlobs( [blob] )
})

将 Canvas 传递给 FineUploader 无效

Passing Canvas to FineUploader not working

javascript

jquery

fine-uploader