Laravel vue – загрузить изображение и получить его

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

 public function createcase(Request $request){

        $validator = Validator::make($request->all(), [
            'title' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
            'description' => 'required',
            'caseTypeId' => 'required',
            'amountneeded' =>'required',
            'uid' => 'required',
            'visible' => 'required',
        ]);
        if ($validator->fails()) {
            return response()->json(['error'=>$validator->errors()], 401);
        }
      $image = $request->file('image');
      $path = $image->store('public');

        $case = casee::create([
            'title' => $request->title,
            'description' => $request->description,
            'caseTypeId' => $request->caseTypeId,
            'amountneeded' => $request->amountneeded,
            'uid' => $request->uid,
            'visible' => $request->visible,
            'image' => $path,
        ]);
        return response()->json(['image' => $image]);

загружать:

  <input type = "file" id = "image" @change = "onFileChange" />

 methods: {
        onFileChange(e) {
      this.image = e.target.files[0];
    },
  async postcase() {
            const formData = new FormData();
            formData.append('title', this.title);
            formData.append('description', this.description);
            formData.append('amountneeded', this.amountneeded);
            formData.append('caseTypeId', this.selectedcasetype);
            formData.append('uid', this.uid);
            formData.append('visible', 1);
            formData.append('image', this.image);
           
            try {
                 await axios.post('http://127.0.0.1:8000/api/postcase', formData).then(response => {
          console.info(response.data);
        })
            
            } catch (error) {
                console.info(response.data);
            }

        }

получить:

  <v-flex class = "ma-2" v-for = "casee in cases" :key = "casee.id" lg3 xs12 md6 sm4> 

                <img v-if = "casee.image" :src = "'/storage/' + casee.image" alt = "Case Image">

 mounted(){
        this.getcases();
    },
    methods:{
       async getcases(){
            try {
                const response = await axios.get('http://127.0.0.1:8000/api/cases');
                this.cases = response.data.cases;
                console.info(this.cases);
            } catch (error) {
                console.info(error);
            }
        },

все работает нормально, кроме изображения. он возвращает ошибку Cannot GET /storage/public/CQu7g4X98APkiMSbCGlqyiJhaXzLaEk8P0pZXaD3.jpg, когда я пытаюсь его получить

Отвечает ли это на ваш вопрос? stackoverflow.com/questions/50730143/…

cengsemihsahin 05.02.2023 22:32

@cengsemihsahin к сожалению, нет

aliana 05.02.2023 22:34

У вас где-то ошибка связана с папкой public. Должно быть /storage/FILENAME.jpg, а не /storge/public/FILENAME.jpg. Попробуйте изменить URL-адрес и посмотрите, какой URL-адрес подходит для загрузки изображения.

matiaslauriti 05.02.2023 22:39

@matiaslauriti в моей базе данных это public/CQu7g4X98APkiMSbCGlqyiJhaXzLaEk8P0pZXaD3.jpg, но на вкладке сети возвращается Cannot GET /storage/public/uA9HtVHw8Ihg6xkglrbsflK5POXdCBCwhbtqqbpR.jpg, и когда я пытаюсь проверить URL-адрес на сервере, все возвращает 404 not found

aliana 05.02.2023 22:46
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
4
65
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Убедитесь, что каталог хранилища правильно связан с общедоступным. Вы можете запустить эту команду, чтобы сделать это автоматически:

php artisan storage:link
Ответ принят как подходящий

Frontend не смог получить доступ к файловой системе как «/storage/public/FILENAME.jpg».

Если вы используете Laravel 9.x и не меняли никаких настроек файловой системы по умолчанию, ваш файл будет храниться в папке «<корень проекта>/storage/app/public/», это путь файловой системы по умолчанию, но интерфейс может получить доступ только к вашему Папка «<project root>/public/», сделайте контрольный список, как показано ниже, может помочь вам решить проблему.

1. Убедитесь, что вы выполнили команду php artisan storage:link, и она создаст символическую ссылку с вашего пути к хранилищу на общедоступный путь.

Если вы не меняли настройки, он создаст ссылку из «<корень проекта>/storage/app/public» на «<корень проекта>/public/storage», после выполнения команды вы увидите папку хранилища в общей папке. .

Вы можете получить доступ к «<APP_URL>/storage/FILENAME.jpg», чтобы увидеть, успешно ли создана ссылка или нет, если вы не получили 404, это означает, что ваша ссылка создана так, как должна быть.

2. Используйте помощник laravel для создания URL-адреса хранилища.

Используйте помощник asset() для создания URL-адреса файлов.

После шага 1 ваши файлы будут находиться в папке «<project root>/public/storage», а ваш корень nginx будет иметь общедоступный доступ по умолчанию, поэтому вам больше не нужен общедоступный URL-адрес.

asset('storage/FILENAME.jpg');
// output will be "<APP_URL>/storage/FILENAME.jpg"

3. (Не обязательно) Проверьте, кэшировал ли laravel ваше представление.

Потому что какой-то новый разработчик laravel не заметил, что laravel кэширует ваше представление, и они продолжают думать, что код не работает.

Вы можете легко проверить, кэшировал ли laravel представление с помощью команды php artisan about, если вы используете последнюю версию laravel, и использовать php artisan view:clear для очистки кеша представления.

спасибо за ваш подробный ответ !, я сделал все, как указано, и теперь я могу получить доступ к 127.0.0.1:8000/storage/… в моем бэкэнде, что означает, что изображение хранится правильно, я думаю? однако в моем интерфейсе <img: src = "'/storage/' + casee.image" alt = "Case Image"> по-прежнему возвращает Cannot GET /storage/public/CQu7g4X98APkiMSbCGlqyiJhaXzLaEk8P0pZXaD3.jpg‌​. ваша помощь будет принята с благодарностью!!

aliana 06.02.2023 10:11

Поскольку вы сохраняете неправильные данные в своей базе данных, просто сохраните файл как FILENAME.jpg без общедоступного префикса.

Charlie 06.02.2023 10:48

Если вам нужно быстрое решение, замените 'image' => $path на 'image' => basename($path).

Charlie 06.02.2023 10:54

на этот раз он возвращает Cannot GET /storage/3EnhcRaPqah3G03o2k7QfhLZTjlfoHJOSqrNpaoH.jpg

aliana 06.02.2023 11:05

Видите ли вы свою папку хранения в общей папке? Правильно сохраненный не означает, что он может получить доступ.

Charlie 06.02.2023 11:10

как public/storage, так и storage/app/public содержат изображения, которые я загружаю, и 127.0.0.1:8000/storage/img.jpg хорошо отображает изображение

aliana 06.02.2023 11:13

Ох, хорошо. Это означает, что проблема с серверной частью уже решена. При привязке внешнего интерфейса может возникнуть другая проблема. Можете ли вы проверить правильность URL-адреса src или нет?

Charlie 06.02.2023 11:22

я сделал шаги, которые вы упомянули, и некоторые другие конфигурации, и теперь это работает! большое спасибо

aliana 06.02.2023 11:24

Вот как я решил это, если кто-то столкнется с этой проблемой: на основе предыдущих ответов:

1. php artisan storage:link

  1. replace 'image' => $path to 'image' => basename($path).

3.<img :src = "'http://127.0.0.1:8000/storage/' + casee.image" alt = "Case Image">

Другие вопросы по теме