How to get files as url from laravel storage folder and convert them as base 64 in vuejs?

Question

i'm trying to get files from storage folder and converting them into base64 in vue.js. i'm using below method, But it seems not working.

public function getImages()
    {
        $filesToReturn = [];
        $files = File::files(storage_path() . "/app/record_keeper");
        foreach ($files as $file) {
            array_push($filesToReturn, $file->getRealPath());
        }
        return response()->json(['files' => $filesToReturn], $this->response_status_code, 200);
    }

returned file urls

{"files":["/home/Project/vue_image_previewer/storage/app/record_keeper/1.jpeg","/home/Project/vue_image_previewer/storage/app/record_keeper/2.jpeg"]}

in vue js

data() {
    return {
      imageUrls: [],
      images: [],
      img_id: 0,
      currentIndex: 0,
      savedImages: [],
    }
  },

methods: {
 async getAllImagesById() {
       await this.axios.get('/aaa-get-images').then(response => {
       this.savedImages = response.data.data;
       self.savedImages.forEach(function (url) {
       this.toDataUrl(url);
       });
      },
toDataUrl(url) {
    let self = this;
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
             self.imageUrls.push({
            file: reader.result,
          });
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}
}

where is the problem? Thank you!

here is the result.

Answer 1

i fixed it my own. had to change both backend and frontend.

fileSystem.php

'my_folder' => [
            'driver' => 'local',
            'root' => storage_path('app/public/uploads/my_folder')
        ],

controller method

public function getImages()
    {
        $filesToReturn = [];
        $files = File::files(storage_path() . "/app/public/uploads/my_folder");
        foreach ($files as $file) {
            $fileName = basename($file);
            $file = Storage::url('uploads/my_folder/' . $fileName);
            array_push($filesToReturn, url($file));
        }
        return $this->apiResponse(['files' => $filesToReturn], $this->response_status_code, 200);
    }

frontend method

 async convertUploadedFilesToBase64(savedImages) {
            let self = this;
            for (let i = 0; i < savedImages.length; i++) {
                fetch(savedImages[i])
                    .then(res => res.blob())
                    .then(blob => {
                        let reader = new FileReader();
                        reader.readAsDataURL(blob);
                        reader.onloadend = function () {
                            let base64String = reader.result;
                            self.imageUrls.push({
                                file: base64String,
                            });
                            console.log('Base64 String - ', base64String);
                            console.log('Base64 String without Tags- ', base64String.substr(base64String.indexOf(', ') + 1));
                        }
                    });
            }
        },

Answer 2

You are getting the relative path of the image file. XMLHttpRequest cannot read the image like that. You should return the image URL like http://somedomain.com/storage/image.jpg from the laravel getImages() method.