1

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

哪里有问题？谢谢！

这是结果。 在此处输入图像描述

4

2 回答 2

0

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

于 2020-09-24T03:57:45.430 回答
0

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

文件系统.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));
                        }
                    });
            }
        },
于 2020-10-13T05:47:58.513 回答