简体   繁体   中英

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.

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. Changing the type to file will fail the upload.

So I'm guessing it has to do with the base64 having to be converted to a readable file.

After searching for converting base64 to file, I've tried:

blobData = atob(imageData)

But it errors: 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. 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.

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. And setting it as the value directly will result in a string: '[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.

To be clear, I'm looking for a client-side solution, and don't want to use canvas or any other extra helper elements.

You are trying to convert the URI scheme instead of the data. You will have to get at the encoded data of the URI to decode it.

data URI syntax

Let's take a look again at this img tag and its slightly disturbing syntax:

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

You have:

  • data - name of the scheme
  • image/png - content type
  • base64 - the type of encoding used to encode the data
  • iVBOR... - the encoded data
  • some , and ; and : sprinked for good measure

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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