简体   繁体   English

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

[英]Using base64 in form to upload as file

I have this simple upload form to browse and upload an image. 我有这个简单的上传表单来浏览和上传图像。

<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>

But I'm using an image cropper, that outputs a base64 string and want to upload that instead. 但是我正在使用图像裁剪器,该图像裁剪器输出base64字符串,并希望上传该字符串。

Now the browser doesn't allow me to set the value of the file input to the string, it wants a file. 现在,浏览器不允许我将输入文件的值设置为字符串,它需要一个文件。

Now I replaced: 现在我替换了:

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

With: 附:

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

And handle the browsing/picking an image elsewhere. 并在其他地方处理浏览/挑选图像。

Now this somehow does upload a file, but the image is invalid, it's just a text-file with the base64 string inside it. 现在,该文件确实以某种方式上传了文件,但是图像无效,它只是一个文本文件,其中包含base64字符串。 Changing the type to file will fail the upload. 将类型更改为file将导致上传失败。

So I'm guessing it has to do with the base64 having to be converted to a readable file. 因此,我猜测这与必须将base64转换为可读文件有关。

After searching for converting base64 to file, I've tried: 搜索将base64转换为文件后,我尝试了:

blobData = atob(imageData)

But it errors: Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. 但是它会出错: Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. , while if I paste the string ( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etc ) into the address-bar it displays correctly. ,如果我将字符串( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etc到地址栏中,则会正确显示。 Same when I try this: http://wiki.lenux.org/base64-string-to-blob-object/ I there's a lot of different ways to convert it, but I keep getting the error on atob that it's not correctly encoded. 尝试此操作时相同: http : //wiki.lenux.org/base64-string-to-blob-object/我有很多不同的方法来转换它,但是我不断在atob上收到错误消息,指出它的编码不正确。

I feel there must be a simple solution, because the browser already knows how to decode the string. 我觉得必须有一个简单的解决方案,因为浏览器已经知道如何解码字符串。

I've found: http://www.nixtu.info/2013/06/how-to-upload-canvas-data-to-server.html that outputs only the size and type of the image, but does not convert it. 我发现: http ://www.nixtu.info/2013/06/how-to-upload-canvas-data-to-server.html仅输出图像的大小和类型,但不进行转换。 And setting it as the value directly will result in a string: '[object Blob]` 并将其直接设置为值将产生一个字符串:'[object Blob]`

Going deeper down the rabbithole: Convert Blob to binary string synchronously this converts the blob to a Uint8Array , I think I'm very close, but I'm lost right now. 深入探讨: 将Blob同步转换为二进制字符串,这会将blob转换为Uint8Array ,我想我已经很接近了,但是我现在迷路了。

To be clear, I'm looking for a client-side solution, and don't want to use canvas or any other extra helper elements. 明确地说,我正在寻找一种客户端解决方案,并且不想使用canvas或任何其他额外的辅助元素。

You are trying to convert the URI scheme instead of the data. 您正在尝试转换URI方案而不是数据。 You will have to get at the encoded data of the URI to decode it. 您将必须获取URI的编码数据才能对其进行解码。

data URI syntax 数据URI语法

Let's take a look again at this img tag and its slightly disturbing syntax: 让我们再次看一下这个img标签及其稍微令人不安的语法:

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

You have: 你有:

  • data - name of the scheme data -方案名称
  • image/png - content type image/png内容类型
  • base64 - the type of encoding used to encode the data base64用于编码数据的编码类型
  • iVBOR... - the encoded data iVBOR...编码数据
  • some , and ; 一些和; and : sprinked for good measure 和:撒好

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

The easiest way would be to split on the comma. 最简单的方法是分割逗号。

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