How to send a multiples images to api endpoint vue3 typescript

Ionic Framework Ionic Vue
1

Hi guys, im new using Ionic 5 + vue 3, im trying to send a batch of images that i have in a order when is dispatch, so i need to send it to an API endpoint that is created in Laravel 8 using sanctum, but i dont know how is the best way to send images, I follow the example in the documentation for taking photos and saving in localstorage, so i have persist data in Order detail page but i dont know how to take that batch of images an send it through to axios.

2

If you images are being stored as base64 strings, then you would need to convert the strings to blobs and send that along with the request. This blog post should be helpful

1 Like
3

thanks for the fast reply, i have a doubt about that, when I enter in the detail order i use the function ionWillEnter and pass the images to an a array like this
const imagenes = localStorage.getItem("_cap_photos"); then I do something like this

if (imagenes) {
     this.fotos = imagenes; //fotos is an array declare in data() {return {fotos: []}}
 }

so in the function after the confirm (alertController) i try to get this images an use for to build a FormData() object doing this

for (const img of this.fotos) {                                
                const base64Data = img.webviewPath;
                const base64 = await fetch(base64Data);
                
                const blob = await base64.blob();            
                fd.append("files[]", blob, img.filepath);
              }

but when i do that, the app its starting sending a lot of request with “undefined” route, and throw a lot of errors, i try with different ways to get the simplest result but im still don’t getting anything