使用 Vue 和 Laragon 修复 CRUD 应用程序的 Laravel 图像存储路径问题

使用 Vue 处理 CRUD 中图像上传的 Laravel 存储错误

使用 Laravel 使用优化的存储路径和错误处理在服务器端处理图像存储。

<?php
// In ConcertController.php
namespace App\Http\Controllers;
use App\Models\Concert;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ConcertController extends Controller {
    public function store(Request $request) {
        // Validating the image and other concert data
        $request->validate([
            'name' => 'required|max:30',
            'description' => 'required|max:200',
            'date' => 'required|date',
            'duration' => 'required|date_format:H:i:s',
            'image' => 'required|file|mimes:png,jpg,jpeg,gif|max:2048'
        ]);

        $concert = Concert::create($request->except('image'));
        if ($request->hasFile('image')) {
            $imgName = microtime(true) . '.' . $request->file('image')->getClientOriginalExtension();
            $path = $request->file('image')->storeAs('public/img', $imgName);
            $concert->image = Storage::url($path);
            $concert->save();
        }

        return redirect('concerts/create')->with('success', 'Concert created');
    }
}

使用 Axios 验证和上传文件的 Vue 前端

使用 Vue.js 和 Axios 进行图像文件上传和验证，并进行错误处理

<template>
<div>
  <form @submit.prevent="submitConcert">
    <input type="text" v-model="concert.name" placeholder="Concert Name" required />
    <input type="file" @change="handleImageUpload" accept="image/*" />
    <button type="submit">Upload Concert</button>
  </form>
</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      concert: {
        name: '',
        image: null
      }
    };
  },

  methods: {
    handleImageUpload(event) {
      this.concert.image = event.target.files[0];
    },

    async submitConcert() {
      let formData = new FormData();
      formData.append('name', this.concert.name);
      formData.append('image', this.concert.image);

      try {
        await axios.post('/api/concerts', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        });
        alert('Concert successfully created');
      } catch (error) {
        alert('Error uploading concert');
      }
    }
  }
};
</script>

Laravel 后端文件上传过程的单元测试

使用 PHPUnit 测试 Laravel 图像存储和检索

<?php
// In tests/Feature/ConcertTest.php
namespace Tests\Feature;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
use Tests\TestCase;

class ConcertTest extends TestCase {
    public function testConcertImageStorage() {
        Storage::fake('public');

        $response = $this->post('/api/concerts', [
            'name' => 'Test Concert',
            'description' => 'A sample description',
            'date' => '2023-12-31',
            'duration' => '02:30:00',
            'image' => UploadedFile::fake()->image('concert.jpg')
        ]);

        $response->assertStatus(302);
        Storage::disk('public')->assertExists('img/concert.jpg');
    }
}

解决常见的 Laravel 图像存储问题

1. 什么是 php artisan storage:link 做？
2. 该命令创建了一个符号链接 存储/应用/公共 目录和 公共/存储 目录。这对于使存储文件可通过公共 URL 进行访问至关重要。
3. 为什么我的图像路径存储为临时文件？
4. 当 Laravel 无法访问指定的存储路径时会发生这种情况，通常是由于权限问题或缺少符号链接，导致其默认为系统的临时目录。
5. 如何为存储目录设置正确的权限？
6. 在 Linux 上，运行 chmod -R 775 storage 授予必要的权限，并在 Windows 上确保 Laragon 具有写入文件的管理访问权限。
7. 什么是 Storage::disk('public')->put() 做？
8. 此命令使用指定的路径将文件保存到“公共”磁盘。这是一个替代方案 storeAs() 并提供管理自定义存储路径的灵活性。
9. 如何在 Laravel 中配置默认​​文件系统？
10. 调整 config/filesystems.php 将默认磁盘设置为“公共”而不是“本地”，确保文件正确存储在公共存储文件夹中。
11. 如果我的图像仍存储为临时路径，我应该检查什么？
12. 验证符号链接是否存在，并确认您在 Laragon 中的权限和环境配置，以确保 Laravel 具有完全的存储访问权限。
13. 为什么使用 microtime(true) 用于命名文件？
14. 此函数生成基于时间戳的文件名，防止重复和覆盖，这对于管理大量上传特别有用。
15. 怎么样 hasFile() 在 Laravel 工作？
16. 此方法检查文件是否随请求上传，这有助于验证和处理文件上传而不会出现错误。
17. 为什么文件验证是用 mimes 重要的？
18. 指定 mimes: png,jpg,gif 限制上传某些文件类型，提高安全性并防止恶意文件上传。

可靠图像存储的关键步骤

确保 Laravel 应用程序正确处理图像上传涉及几个关键步骤：设置符号链接、检查权限和验证文件系统配置。每个步骤都有助于避免存储路径错误，确保上传的图像可访问并保存到正确的目录。实施这些实践可以增强您的工作流程和用户体验。 🌟

Laravel 的图像处理可能具有挑战性，但通过正确的设置，管理存储路径会变得更加顺畅。通过使用这里分享的技术，从权限调整到 Vue 表单处理，您将拥有一个更稳定的图像存储环境。一致应用这些原则将减少错误并使您的 Laravel 项目更加可靠。