使用Ajax上传base64映像 [英] Upload base64 image with Ajax

问题描述

我的客户端正在为用户提供选择图片，裁剪并调整大小，然后显示它（在< img> DOM元素中）。

如果图片没问题，用户可以将其上传到服务器，以便保存。

My client is offering the user to pick a picture, crop and resize it and then display it (in a <img> DOM element).
If the picture is fine, the user can upload it to the server so it can be saved.

我想通过Ajax请求进行上传。

I would like to do the upload thanks to an Ajax request.

我在互联网上发现大量的例子来上传从客户端PC检索到的原始图像。例如：

I found tons of examples on the internet to upload the original image retrieved from the client PC. For instance:

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

如果我决定上传通过表单输入检索的图片，这项工作正常。

This works properly if I decide to upload the picture retrieved through the form input.

在我的情况下，我想上传修改过的图片（保存在< img> 元素中）而不是原始的。

这张图片存储为base64图片（有关信息：我使用croppie.js库生成图像）。

In my case I want to upload the modified picture (saved in a <img> element) instead of the original one.
This picture is stored as a base64 picture (For information: I used the croppie.js library to generate the image).

我不知道如何使用Ajax上传此图片。

I don't know how to upload this picture with Ajax.

我尝试将其作为常规参数上传，但在服务器端，img为空string：

I tried to upload it as a regular parameter but on the server side the img is an empty string:

var url = 'http://host.com/action/';
var data = {};
data.img = $('img#generated-image').attr('src');

$.ajax({url: url, type: "POST", data: data})
  .done(function(e){
    // Do something
  });
// RESULTS in a empty data.img on the server side.

我的问题是在检索img参数时服务器有一个空字符串。我怀疑图像可能太大而无法传递到服务器或其他一些我不理解的问题....

My problem being the server having an empty string when retrieving the "img" parameter. I suspect the image is maybe too big to be passed to the server or some other issues that I don't understand... .

所以我想知道什么是使用表单没有使用表单发送base64映像到服务器的正确方法。

So I'm wondering what is the proper way to send a base64 image to the server using an Ajax request WITHOUT using a form.

谢谢为了你的帮助。

编辑

似乎是一个xmlHTTP POST参数大小问题。我试图减少图像字符串表示的字符数，服务器现在可以检索它。

Seems to be an xmlHTTP POST parameter size issue. I tried to reduce the number of characters of the string representation of the image and the server is now able to retrieve it.

EDIT2

在php.ini文件中将post_max_size设置为8M，而图片大小仅为24K。所以问题不存在。

我正在使用PHP和Symfony2框架。

可能是Symfony2的限制。

post_max_size is set to 8M in the php.ini file wheras the picture size is only 24K. So the problem is not there.
I'm using PHP with the Symfony2 framework.
Maybe a limitation from Symfony2.

推荐答案

我最终决定将base64映像转换为Blob，因此可以通过带有formData对象的Ajax请求发送它，如下所示。
它节省了上传带宽（base64比其二进制等价物多了33％）并且我找不到没有传输base64参数的原因（由于某些地方的大小限制肯定）。

I finally decided to convert the base64 image to a Blob so it can be sent via an Ajax request with the formData object as follows. It saves upload bandwidth (base64 takes 33% more bits than its binary equivalent) and I couldn't find the reason for no transmission of base64 parameter (due to size limitation somewhere for sure).

base64ToBlob功能基于对其他问题的回答。

The base64ToBlob function is based on this answer to another question.

function base64ToBlob(base64, mime) 
{
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, {type: mime});
}

我的JS代码：

var url = "url/action";                
var image = $('#image-id').attr('src');
var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, "");
var blob = base64ToBlob(base64ImageContent, 'image/png');                
var formData = new FormData();
formData.append('picture', blob);

$.ajax({
    url: url, 
    type: "POST", 
    cache: false,
    contentType: false,
    processData: false,
    data: formData})
        .done(function(e){
            alert('done!');
        });

在Symfony2中，我可以通过以下方式检索图像：

In Symfony2 I can retrieve the image thanks to:

$picture = $request->files->get('picture');

这篇关于使用Ajax上传base64映像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！