繁体   English   中英

在表单中使用base64作为文件上传

[英]Using base64 in form to upload as file

我有这个简单的上传表单来浏览和上传图像。

<form action="https://storage.googleapis.com/YOUR_BUCKET_NAME" 
      method="post" enctype="multipart/form-data">
  <input name="key" type="text" value="objectName.txt" /><br/>
  <input name="file" type="file" /><br/>
  <input type="submit" value="Upload!" />
</form>

但是我正在使用图像裁剪器,该图像裁剪器输出base64字符串,并希望上传该字符串。

现在,浏览器不允许我将输入文件的值设置为字符串,它需要一个文件。

现在我替换了:

<input name="file" type="file" />

附:

<input type="hidden" name="file" />

并在其他地方处理浏览/挑选图像。

现在,该文件确实以某种方式上传了文件,但是图像无效,它只是一个文本文件,其中包含base64字符串。 将类型更改为file将导致上传失败。

因此,我猜测这与必须将base64转换为可读文件有关。

搜索将base64转换为文件后,我尝试了:

blobData = atob(imageData)

但是它会出错: Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. ,如果我将字符串( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etc到地址栏中,则会正确显示。 尝试此操作时相同: http : //wiki.lenux.org/base64-string-to-blob-object/我有很多不同的方法来转换它,但是我不断在atob上收到错误消息,指出它的编码不正确。

我觉得必须有一个简单的解决方案,因为浏览器已经知道如何解码字符串。

我发现: http ://www.nixtu.info/2013/06/how-to-upload-canvas-data-to-server.html仅输出图像的大小和类型,但不进行转换。 并将其直接设置为值将产生一个字符串:'[object Blob]`

深入探讨: 将Blob同步转换为二进制字符串,这会将blob转换为Uint8Array ,我想我已经很接近了,但是我现在迷路了。

明确地说,我正在寻找一种客户端解决方案,并且不想使用canvas或任何其他额外的辅助元素。

您正在尝试转换URI方案而不是数据。 您将必须获取URI的编码数据才能对其进行解码。

数据URI语法

让我们再次看一下这个img标签及其稍微令人不安的语法:

  <img src =“ data:image / png; base64,iVBOR ...” /> 

你有:

  • data -方案名称
  • image/png内容类型
  • base64用于编码数据的编码类型
  • iVBOR...编码数据
  • 一些和; 和:撒好

http://www.phpied.com/data-urls-what-are-they-and-how-to-use/

最简单的方法是分割逗号。

var image ="data:image/png;base64,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"
var decoded = atob(image.split(",")[1])

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM