获取多个文件并在 Vue 组件中显示

Question

我正在按扩展名处理文件，并将图像、文件和 pdf 存储在公共存储中的相应文件夹中。

Php artisan link:storage 已经运行。文件被正确分类并存储在正确的位置。

说明使用“echo asset()”创建 URL 链接的文档部分对我来说有点不清楚，我相信这就是问题所在。我应该在哪里呼应资产？我无法在 vue 组件中这样做。

但是，在前端（Vue 组件使用 Axios 传递数据）似乎 :src 只是获取存储在数据库中的文件路径，而不是从存储位置获取实际文件。

这是图像应该显示的组件部分：

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

使用当前控制器设置文件被组织到它们各自的文件夹中并存储在“storage/app/指定的文件夹名称”中。这工作正常，唯一的问题是在创建记录后检索记录。

部分解决： 通过将存储位置更改为：

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

而不是

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

虽然我有一个可行的解决方法，但如果能理解存储无法正常工作的原因，我们将不胜感激。

Answer 1

asset helper 方法将返回到图像文件夹的完整正确路径。 由于您没有调用该方法（或者您不能因为您在 vue 组件中工作），您必须自己设置路径的基础并连接图像名称。

默认情况下，Laravel 的公共目录是入口点，所以如果图像放置正确，这应该可以工作：

<img  width="220" height="250" :src=" '/storage' + image.post_image_path" />

Answer 2

像这样保存图片：

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

解决了这个问题。