javascript - 如何使用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 Controller 。

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

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

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

从 dropzone 上传(通过拖放或单击)正在工作并且上传成功但使用 myDropzone.addFile() 函数在我的 Controller 中返回一个空对象:

var_dump($files);

返回

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

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

感谢您的帮助!

Answer 1

最后我找到了一个无需创建 Canvas 的可行解决方案:

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 函数:Convert Data URI to File then append to FormData

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

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