у меня есть таблица «кейс», которая содержит столбец изображения, я хочу, чтобы пользователи вставляли в таблицу дел и могли загружать изображение, на домашней странице пользователи могут просматривать дела вместе с изображением каждого дела. до сих пор я пробовал:
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, когда я пытаюсь его получить
@cengsemihsahin к сожалению, нет
У вас где-то ошибка связана с папкой public
. Должно быть /storage/FILENAME.jpg
, а не /storge/public/FILENAME.jpg
. Попробуйте изменить URL-адрес и посмотрите, какой URL-адрес подходит для загрузки изображения.
@matiaslauriti в моей базе данных это public/CQu7g4X98APkiMSbCGlqyiJhaXzLaEk8P0pZXaD3.jpg, но на вкладке сети возвращается Cannot GET /storage/public/uA9HtVHw8Ihg6xkglrbsflK5POXdCBCwhbtqqbpR.jpg, и когда я пытаюсь проверить URL-адрес на сервере, все возвращает 404 not found
Убедитесь, что каталог хранилища правильно связан с общедоступным. Вы можете запустить эту команду, чтобы сделать это автоматически:
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. ваша помощь будет принята с благодарностью!!
Поскольку вы сохраняете неправильные данные в своей базе данных, просто сохраните файл как FILENAME.jpg без общедоступного префикса.
Если вам нужно быстрое решение, замените 'image' => $path
на 'image' => basename($path)
.
на этот раз он возвращает Cannot GET /storage/3EnhcRaPqah3G03o2k7QfhLZTjlfoHJOSqrNpaoH.jpg
Видите ли вы свою папку хранения в общей папке? Правильно сохраненный не означает, что он может получить доступ.
как public/storage, так и storage/app/public содержат изображения, которые я загружаю, и 127.0.0.1:8000/storage/img.jpg хорошо отображает изображение
Ох, хорошо. Это означает, что проблема с серверной частью уже решена. При привязке внешнего интерфейса может возникнуть другая проблема. Можете ли вы проверить правильность URL-адреса src или нет?
я сделал шаги, которые вы упомянули, и некоторые другие конфигурации, и теперь это работает! большое спасибо
Вот как я решил это, если кто-то столкнется с этой проблемой: на основе предыдущих ответов:
1. php artisan storage:link
replace 'image' => $path to 'image' => basename($path).
3.<img :src = "'http://127.0.0.1:8000/storage/' + casee.image" alt = "Case Image">
Отвечает ли это на ваш вопрос? stackoverflow.com/questions/50730143/…