Question

我已经构建了一个上传功能，可以将<canvas>对象转换为blob，并通过ajax帖子（使用jQuery 2.1.4）将其上传到Keystonejs（nodejs）站点。这适用于Firefox和Chrome，但不适用于Safari，我无法弄清楚原因。

我基本上遵循了Chris Troutner在ConnextCMS中使用的File Upload API，除了我没有使用<form>来构建上传，它都是通过javascript与FormData();完成的，在澄清问题的情况下附加包含File();的{{1}}。我也使用blueimp Javascript-Canvas-to-Blob polyfill来支持在Safari 6 +中转换为blob。

这是HTML（画布是通过js构建的）：

blob

和js：

  <div id="canvasDiv"></div>
  <button id="saveCanvas" class="btn btn-default btn-lg" type="button">Save</button>

Safari（网络POST请求正文）：

// add canvas to page
    var canvas,
canvasWidth = 306,
canvasHeight = 306; //leave room for canvas border

var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if (typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

// Create form data, add blob and make the ajax call
$('#saveCanvas').on('click', function() {

 if (clickX.length, clickDrag.length, clickY.length > 0) {
      if (canvas.toBlob) { //Ensure the toBlob library is loaded
        canvas.toBlob( handleCanvasBlob );
      } else {
        console.error('Could not access toBlob library!');
        return;
      }
} else {
    $('.canvas-footer').prepend('<p class="alert alert-warning text-center col-lg-12">Say something when you Yellp<sub>®</sub> at me!</p>');

    return;
}

function handleCanvasBlob(blob) {

    var newImg = new FormData();

    var bf = new File([blob], 'fileName', {type: blob.type}); // fileName is just a placeholder here

    newImg.append('image_upload', bf, 'filename.png');
    debugger;

    var opts = {
        type: 'POST',
        url: '/api/imageupload/create',
        data: newImg,
        cache: false,
        processData: false,
        contentType: false,
        //contentType: "multipart/form-data",
        success: function(data) {

          data.image_upload.name = 'yellp_' + data.image_upload._id;
          data.image_upload.filename = 'yellp_' + data.image_upload._id;
          data.image_upload.url = '/uploads/images/' + data.image_upload.image.filename;
          data.image_upload.imageType = 'image/png';
          data.image_upload.createdTimeStamp = new Date();

          //Update the image with the information above.
          $.get('/api/imageupload/'+data.image_upload._id+'/update', data.image_upload, function(data) {

            console.log('Image information updated.');

          })

          //If the metadata update fails:
          .fail(function(data) {

            console.error('The image metadata was not updated. Here is the error message from the server:');
            console.error('Server status: '+err.status);
            console.error('Server message: '+err.statusText);

            alert('Failed to connect to the server while trying to update image metadata!');
          });

          setTimeout(function() {
            window.location.reload();
          }, 100);

        }
    };

    $.ajax(opts);
}

});

Firefox（网络POST请求正文）：

Content-Disposition: form-data; name="image_upload"; filename="filename.png"
Content-Type: image/png

(Nothing here)

也许某些事情失败了，因为我正在快速制作Content-Disposition: form-data; name="image_upload"; filename="filename.png" Content-Type: image/png PNG �� IHDR��2��2��yÆ\Å��}IDATxíÝýU~ÇñýîoøP*eaùþ Ä H6«$² (etc…)？

旁注：在FF和Chrome中，窗口重新加载，我看到HTML前端显示的图像，而在Safari中，如果通过Safari上传则会损坏404。也许它以不同的方式处理网址/路由？

jQuery AJAX发布仅在Safari中失败（请求正文数据未发布）

0 个答案: