Note: The blob’s result cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:*/*;base64, from the result.
The below part is for server side when have to deal with a blob file and base64 image file.
Use Case: Front-end on vue js and Back-end Laravel
upload a image from vue js to back-end server side Laravel.
vue js have to format the blob file to base64 format otherwise it can’t be send to server side back-end framework (laravel).
Figure-2 gives the script to get blob file as base64 image file.
If normal form submit is used to send the data to server side then don’t need to convert the image to base64.
I have used back-end as laravel.
Image::make() is a use case of intervention/image package for laravel.
The Best way to upload a blob file from front-end to back-end
Form/Multipart
Use Form/Multipart instead of Base64 encoding. Why?
Base64 inside JSON
Advantages:
- No need to manually encode/decode your data in JSON (if using any frontend framework or client library)
- File’s content is just another field in the JSON object
Disadvantages:
- Need to encode the file in Base64
- Uses more CPU, more memory, and more network bandwidth (Base64 uses 33% more space than binary)
- Little support from backend frameworks
Multipart
Advantages:
- No need to encode the file in Base64
- Uses less CPU, less memory, and less network bandwidth
- Full support from backend frameworks
Disadvantages:
- Need to manually encode/decode your data in JSON
- File’s content is separate from the JSON object
Note : never save the file as binary on our back-end database or store system.
ON Vue 2 :
On Back-end (laravel)
References :
