Получение нескольких файлов и отображение в компоненте Vue - PullRequest
0 голосов
/ 29 января 2020

Я обрабатываю файлы по расширению и храню изображения, файлы и файлы PDF внутри соответствующих папок, расположенных в хранилище c.

Php ссылка ремесленника: хранилище уже запущено. Файлы правильно сортируются и хранятся в правильных местах.

Часть документации, в которой говорится о создании URL-ссылки с использованием "echo asset ()", немного неясна для меня, и я считаю, что именно в этом заключается проблема. Где я должен повторить актив? Мне не удалось сделать это в компоненте vue.

Однако на внешнем интерфейсе (Vue Компонент использует Ax ios для передачи данных) кажется, что: sr c только получить путь к файлу, хранящемуся в базе данных, и не получить фактический файл из места хранения.

Вот часть компонента, где должно отображаться изображение:

  <div v-for="image in post.images" :key="image.id">
     <img  width="220" height="250" :src=" './storage' + image.post_image_path "  />
  </div>

Вот моя функция контроллера, которая хранит изображения:

    public function store(Request $request)
{
   // get the data from vue component
    $title = $request->title;
    $description = $request->description;
    $author_id = Auth::user()->id;
    $images = $request->images;

    // creating the new post with the data above
    $post = Post::create( [
        'title' => $title,
        'description' => $description,
        'author_id' => $author_id

    ]);

    // we are receiving an array in the image, we need to do a foreach to grab the files that the image has
    foreach($images as $image) {
        $name = $image->getClientOriginalName();
        $ext = $image->getclientoriginalextension();

// creating the extension so we can filter the query above
        $ext_images = array('jpg', 'png');
        $ext_files = array('pdf', 'doc', 'docx','txt');
        $ext_videos = array('mp4', 'mov', 'avi');

// we are proccesing the images files
        if (in_array($ext, $ext_images)) {

            $imagePath = Storage::disk('local')->put('/post_images' , $image);

            Image::create( [
                'post_id' => $post->id,                     
                'post_image_path' => '/local/' . $imagePath,

            ]);

        }
// we are proccessing standard files and saving if 
        elseif (in_array($ext, $ext_files)) {

            $imagePath = Storage::disk('local')->put( '/post_files' ,  $image);

            Image::create( [
                'post_id' => $post->id,
                'post_image_path' => '/local/' . $imagePath,
            ]);


        }
// we are processing the media files (video) and saving if
        elseif (in_array($ext, $ext_videos)) {

            $imagePath = Storage::disk('local')->put('/post_videos' , $image);

            Image::create( [
                'post_id' => $post->id,
                'post_image_path' => '/local/' . $imagePath,
            ]);

        };

    }

    return $post;

С текущим Файлы настроек контроллера организованы в соответствующие папки и хранятся в «хранилище / приложение / имя указанной папки». Это работает правильно, единственная проблема при получении записей после их создания.

ЧАСТИЧНО РАЗРЕШЕНО: изменив место хранения на:

$image->move(public_path('post_images'), $name);

вместо

$imagePath = Storage::disk('local')->put('/post_images' , $image);

Несмотря на то, что у меня есть жизнеспособное решение, понимание того, почему хранилище не работает, будет высоко оценено.

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Сохранение изображения как:

$image->move(public_path('post_images'), $name);

решило проблему.

0 голосов
/ 29 января 2020

Метод помощника актива вернет полный путь к папке с изображениями. Поскольку вы не вызываете метод (или не можете этого сделать, так как работаете с компонентом vue), вы должны самостоятельно задать основу своего пути и указать имя изображения.

По умолчанию * Директория publish c 1006 * является точкой входа, поэтому это должно работать, если изображение размещено правильно:

<img  width="220" height="250" :src=" '/storage' + image.post_image_path" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...