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

【问题标题】：How to get files as url from laravel storage folder and convert them as base 64 in vuejs?如何从laravel存储文件夹获取文件作为url并将它们转换为vuejs中的base 64？
【发布时间】：2020-09-24 03:08:47
【问题描述】：

我正在尝试从存储文件夹中获取文件并将它们转换为 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);
    }

返回的文件地址

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

问题出在哪里？谢谢！

这是结果。

【问题讨论】：

什么是self？它是否在任何地方定义？其他JS代码看起来不错。
让 self = this;我更新了问题。
我不确定您如何在 Vuejs 中定义 toDataUrl。在 VueJS 中，函数被定义为方法，不需要单独定义self。你能分享整个 vuejs 组件吗？
我更新了问题。请检查。
在getImages() 中尝试array_push($filesToReturn, Storage::url($file->getRealPath()));。

标签： laravel vue.js base64 base64url

【解决方案1】：

您正在获取图像文件的相对路径。 XMLHttpRequest 无法像那样读取图像。你应该从 laravel 的 getImages() 方法返回像 http://somedomain.com/storage/image.jpg 这样的图片 URL。

【讨论】：

vuejs函数有问题。它没有正确转换。我会附上截图。它假定 mime 类型为 data:image/jpeg;base64，而不是 data:text/html;base64,
@madusanka 你能在 toDataUrl 函数中控制台记录你的“url”变量吗？并在此处将结果注释掉。

【解决方案2】：

我自己修好了。必须同时更改后端和前端。

文件系统.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));
                        }
                    });
            }
        },

【讨论】：