如何使用dropzone上传base64图像资源？

Question

我正在尝试使用Dropzone.js上传生成的客户端文档(目前的图像).

// .../init.js

var myDropzone = new Dropzone("form.dropzone", {
    autoProcessQueue: true
}); 

一旦客户完成了他的工作,他只需要点击一个调用保存功能的保存按钮:

// .../save.js

function save(myDocument) {

    var file = { 
        name: 'Test',
        src: myDocument,
    };

    console.log(myDocument);

    myDropzone.addFile(file);
}

console.log()正确地返回了我的文档内容

 data:image/png;base64,iVBORw0KGgoAAAANS...

此时,我们可以看到进度条在放置区中上传文档但上传失败.

这是我的(标准dropzone)HTML表单:

<form action="/upload" enctype="multipart/form-data" method="post" class="dropzone">
    <div class="dz-default dz-message"><span>Drop files here to upload</span></div>
    <div class="fallback">
        <input name="file" type="file" />
    </div>
</form>

我有一个收到邮件请求的Symfony2控制器.

// Get request
$request = $this->get('request'); 

// Get files
$files = $request->files;

// Upload
$do = $service->upload($files);

从dropzone上传(通过拖放或点击)正在运行并且上传成功但是使用myDropzone.addFile()函数在我的控制器中返回一个空对象:

var_dump($files);

返回

object(Symfony\Component\HttpFoundation\FileBag)#11 (1) {
  ["parameters":protected]=>
  array(0) {
  }
}

我想我没有在保存功能中正确设置我的var文件.我试图创建JS图像(var img = new Image()...)但没有任何成功.

谢谢你的帮助 !

Answer 1

最后我发现了一个没有创建画布的工作解决方

function dataURItoBlob(dataURI) {
    'use strict'
    var byteString, 
        mimestring 

    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
        byteString = atob(dataURI.split(',')[1])
    } else {
        byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

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

    return new Blob([new Uint8Array(content)], {type: mimestring});
}

和保存功能:

function save(dataURI) {

    var blob = dataURItoBlob(dataURI);
    myDropzone.addFile(blob);

}

该文件在dropzone中正确显示并已成功上载.我仍然需要处理文件名(我的文档名为"blob").

此处找到了dataURItoBlob函数:将数据URI转换为File然后附加到FormData

[编辑]:我终于在dropzone中编写了这个函数来完成这项工作.你可以在这里查看:https://github.com/CasperArGh/dropzone 你可以像这样使用它:

var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmAAAAKwCAYAAA...';
myDropzone.addBlob(dataURI, 'test.png');