如何从 laravel 存储文件夹中获取 url 的文件并在 vuejs 中将它们转换为 base 64？

Question

我正在尝试从存储文件夹中获取文件并在 vue.js 中将它们转换为 base64。我正在使用下面的方法，但它似乎不起作用。

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);
    }

返回的文件 url

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

在 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();
}
}

问题出在哪里？谢谢！

这是结果。

Answer 1

您正在获取图像文件的相对路径。 XMLHttpRequest 不能那样读取图像。您应该 return 图像 URL 类似于 http://somedomain.com/storage/image.jpg 来自 laravel getImages() 方法。

Answer 2

我自己修好了。不得不改变后端和前端。

fileSystem.php

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

控制器方法

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);
    }

前端方法

 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));
                        }
                    });
            }
        },

如何从 laravel 存储文件夹中获取 url 的文件并在 vuejs 中将它们转换为 base 64？

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

laravel

vue.js

base64

base64url