![]() Once installed, open up app.js, set up the express server, and create the route to handle image upload, decoding, and storage. $ npm i base64-img axios cors express body-parser base64-img: to Convert images to base64, or convert base64 to images.cors: so we can send requests between the same origin.axios: to send HTTP requests from our Vue application.body-parser: to parse incoming request bodies.We’ll install all the necessary packages. Our project directory should now look something like this: |- Index.vue |- assets |- styles/main.css |- server |- public |- app.js `- package.json $ npm init -y & mkdir server server/public & touch server/app.js From the root directory, we’ll do a basic setup for a Node.js Express server. Let’s make a bit of adjustment to the project folder. ![]() Since Vue.js uses the Nodejs runtime in the background, we can have our server-side in the same project directory so both applications can share libraries. This implementation isn’t limited to just Node.js or Javascript, using the right library or built-in APIs, you can convert the base64 string to an image file and store in your application’s filesystem with basically any backend language of choice. Technically this is the format we will send out images. The last part is the textual (or non-textual) file content. atob (): decodes a Base64-encoded string ('atob' should be read as 'ASCII to binary'). The part is optional and can be ignored if the data is none textual. In JavaScript there are two functions respectively for decoding and encoding Base64 strings: btoa (): creates a Base64-encoded ASCII string from a 'string' of binary data ('btoa' should be read as 'binary to ASCII'). The part refers to the file format, it could contain any one of the following values: Data URLs are composed of 3 major parts after the “data:” prefix: data:, One common application of base64 encoding on the web is to encode binary data so it can be included in a data: URL.ĭata URLs are URLs that are prefixed with “ data:”, they allow embedding of file content inline in documents (.html). Syntax window. Note Use the The atob () method to decode a base-64 encoded string. The btoa () method uses the 'A-Z', 'a-z', '0-9', '+', '/' and '' characters to encode the string. Down to the Base-icsīase64 or Radix 64 is a binary-to-text encoding system that is designed to allow binary data to be represented in ASCII string format. Definition and Usage The btoa () method encodes a string in base-64. On the backend, the base64 string is decoded from the string format to its original file object, we can then store the decoded file and return the storage path/URL to the frontend. While interfacing with your web application, the user can select an image (using the input tag, with a type of file) from their device, the content of the selected image is read using the FileReader API, we send the base64 string in Data URL format to a backend API. Here’s a bit of illustration to better understand the process of uploading a Base64 image.
0 Comments
Leave a Reply. |