Laravel 5.6：通过 AJAX 将图像存储到公用文件夹中

Question

我正在为个人项目制作一个管理面板，作为学习 laravel 框架的一种方式，到目前为止我很喜欢它！

我遇到了一个问题，我不知道如何将上传的图像存储到我的应用程序中（尽管安全性较低，但我想使用公用文件夹而不是其他存储空间），我有一个名为 uploads 的文件夹公开。

这是我的 AJAX POST 调用：

$('.form_store_button').click(function(){
		
		var linked_entry = $(this).attr("data-link");
		var form = $(this).closest('form');
		
		
		
		
		$.ajaxSetup({
            headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
        });
		

		switch(linked_entry) {
            
			case "sliders":
			
			    console.log('new slider button clicked');
				
				var formData = new FormData();
                formData.append('title', form.closest($("input[name='title']").val()));
                formData.append('body', form.closest($("textarea[name='body']").val()));
                formData.append('image', form.closest($("input[name='image']").prop('files')[0]));
				formData.append('isVisible', form.closest($("input[name='isVisible']").is(':checked') ? 1 : 0));

				
                $.ajax({

                async: true,
                url: '/sliders',
                type: 'POST',
                data: formData,
                dataType: 'JSON',
			    processData: false,
			    contentType: false,
            
                success: function (data) { 
			        $('.form_valid_container').html('<span class="form_valid_text">✓ '+ data.success +'</span>');
				    form.trigger("reset");
			        console.log(data.success, data.errors);
                },
			
			    error: function (data){
                    var errors = data.responseJSON;
                    console.log(errors);
				
				    $.each(errors , function(){
                        $('.form_error_container').html('<span class="form_error_text">✘ '+ errors.message +'</span>')
                    }); 
                }
				
				
				});

		    break;
					
					

            default:
                        
        }
				
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是我尝试存储图像的控制器（但最终失败）。

public function store(StoreSlider $request)
    {
		
		
        $slider = new Slider();
        $slider->title = $request->title;
        $slider->body = $request->body;
		$slider->image = $request->file('image');
		$slider->isVisible = $request->isVisible;
        $slider->save();
		
        return response()->json($slider);
    }

Answer 1

要遵循的步骤，

1. 您必须将图像存储在公共目录中
2. 将公共路径存储在数据库中

要存储一张图片，需要有以下数据，

1. 上传图片的文件名和扩展名
2. 公共路径

公共功能商店（StoreSlider $request） { $uploadFile = $request->file('image'); //生成随机文件名并附加原始扩展名（例如：asddasada.jpg、asddasada.png） $filename = str_random(6).'.'.$uploadFile->extension(); // 存储路径（将其更改为公共文件夹中所需的路径） $path = 'img/上传'; // 将文件移动到公共文件夹 $uploadFile->storeAs('../../public/'.$path, $filename); $滑块=新滑块（）； $slider->title = $request->title; $slider->body = $request->body; $slider->image = $path.'/'.$filename; // 这样就可以通过 url($slider->image); 访问图片了 $slider->isVisible = $request->isVisible; $滑块->保存（）； 返回响应（）->json（$滑块）； }