如何用VSCode实现Laravel文件上传实时预览 Laravel前端调试上传数据方案

<input type="file" id="imageUpload" accept="image/*">
<div id="previewContainer" style="margin-top: 10px;">
    <img id="imagePreview" src="" alt="Image Preview" style="max-width: 200px; display: none;">
</div>

document.addEventListener('DOMContentLoaded', function() {
    const imageUpload = document.getElementById('imageUpload');
    const imagePreview = document.getElementById('imagePreview');
    const previewContainer = document.getElementById('previewContainer');

    imageUpload.addEventListener('change', function(event) {
        const file = event.target.files[0]; // 获取选择的第一个文件

        if (file) {
            // 检查文件类型，虽然input的accept属性有作用，但这里做个双重保险
            if (!file.type.startsWith('image/')) {
                alert('请选择图片文件！');
                imagePreview.style.display = 'none';
                imageUpload.value = ''; // 清空已选择的文件
                return;
            }

            const reader = new FileReader();

            reader.onload = function(e) {
                // 当文件读取完成时，设置img标签的src
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block'; // 显示预览图片
            };

            reader.onerror = function() {
                console.error('文件读取失败');
                imagePreview.style.display = 'none';
            };

            // 读取文件内容为Data URL
            reader.readAsDataURL(file);
        } else {
            // 没有选择文件，隐藏预览
            imagePreview.style.display = 'none';
            imagePreview.src = ''; // 清空src
        }
    });
});

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8000", // 你的Laravel开发服务器地址
            "webRoot": "${workspaceFolder}/public" // 你的前端文件根目录
        }
    ]
}

; For Xdebug 3.x
[XDebug]
zend_extension = /path/to/xdebug.so ; 替换为你的xdebug模块路径
xdebug.mode = debug
xdebug.start_with_request = yes ; 或者 configure in VSCode launch.json to use xdebug.trigger_value
xdebug.client_host = 127.0.0.1
xdebug.client_port = 9003

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003 // 对应php.ini中的xdebug.client_port
        }
    ]
}

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage; // 引入Storage Facade

class FileUploadController extends Controller
{
    public function upload(Request $request)
    {
        // 1. 验证文件
        $request->validate([
            'image_file' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048', // 示例验证规则
        ], [
            'image_file.required' => '请选择要上传的图片。',
            'image_file.image' => '文件必须是图片格式。',
            'image_file.mimes' => '图片格式必须是 JPEG, PNG, JPG 或 GIF。',
            'image_file.max' => '图片大小不能超过 2MB。',
        ]);

        // 2. 获取文件实例
        $file = $request->file('image_file');

        // 3. 存储文件
        // 默认存储到 storage/app/public 目录，并返回相对于该目录的路径
        // store('images', 'public') 会在 public 磁盘下创建一个 images 文件夹
        // 文件名会自动生成一个唯一ID
        $path = $file->store('images', 'public');

        // 或者你可以指定文件名
        // $fileName = time() . '_' . $file->getClientOriginalName();
        // $path = $file->storeAs('images', $fileName, 'public');

        // 4. 获取文件的公共访问URL
        $url = Storage::disk('public')->url($path);

        // 5. 返回JSON响应给前端
        return response()->json([
            'success' => true,
            'message' => '文件上传成功！',
            'file_path' => $path, // 存储路径
            'file_url' => $url,   // 公共访问URL
        ]);
    }
}

// ... 前端上传文件的 fetch 或 axios 代码片段
fetch('/upload', { // 假设你的上传路由是 /upload
    method: 'POST',
    body: formData, // 包含文件的FormData对象
    headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') // Laravel CSRF token
    }
})
.then(response => {
    if (!response.ok) {
        // 如果HTTP状态码不是2xx，抛出错误
        return response.json().then(errorData => {
            throw new Error(errorData.message || '文件上传失败');
        });
    }
    return response.json();
})
.then(data => {
    if (data.success) {
        console.log('上传成功:', data.file_url);
        // 更新预览区域，显示上传后的图片
        const uploadedImagePreview = document.getElementById('uploadedImagePreview'); // 假设你有一个新的img标签
        if (uploadedImagePreview) {
            uploadedImagePreview.src = data.file_url;
            uploadedImagePreview.style.display = 'block';
        }
        alert(data.message);
    } else {
        alert(data.message || '文件上传失败，请重试。');
    }
})
.catch(error => {
    console.error('上传过程中发生错误:', error);
    alert('上传失败: ' + error.message);
});