如何在laravel中使用ajax请求返回插入的图像？

Question

查看代码：

<form  enctype="multipart/form-data"  name="imagesform" id="imagesform" 
action="{{url('upload')}}" method="post" >
{{ csrf_field() }}
<input name="images[]" type="file" multiple>
<button type="submit"  class="save" id="saveImage" style="border-
radius: 8px; padding: 5px 15px;">SAVE</button>
</form>

这是 Laravel 视图代码。这里我尝试将多个图像上传到数据库中。

AJAX 代码：

  <script type="text/javascript">
  $(document).ready(function(){

  $("#imagesform").submit(function(){


  $.ajaxSetup({
      headers: { 'X-CSRF-TOKEN': 
  $('meta[name="_token"]').attr('content') }
  });
  $.ajax({
      url      :"{{url('upload')}}",
      type: 'POST',
      data:new FormData($("#imagesform").get(0)),
      contentType:false,
      processData:false,
      success: function (data) {
         **$("#insertedImages").html(data);**  
         alert("Uploaded OK!")
      },

  });
  return false;
  });
   });

 </script>

这是我存储图像的ajax请求。另外，我正在尝试显示那些添加的图像（在块中标记）。

控制器代码：

public function uploadSubmit(UploadRequest $request)
{
    $product = Product::create($request->all());
    foreach ($request->images  as $photo) {
       $filename = $photo->store('uploadedImages');
       $filename=substr($filename,15);

        ProductsPhoto::create([
            'product_id' => $product->id,
            'filename' => $filename
        ]);
    }

      return $filename;


   }

这是我的控制器，用于插入这些图像数组并返回相同的图像。但是，它仅显示图像的名称。 即.,eZrcSTlkCeGez8Dq6pTW5X1yLUA080W5UamQEfXk.png..我不想像这样显示它，而是想显示图像。

图像显示：

  <div id="insertedImages"></div>

这就是我用来显示图像的。

Answer 1

如果您在ajax中获取image_name，您可以将其与完整图像路径连接

<script type="text/javascript">
  $(document).ready(function(){

  $("#imagesform").submit(function(){


  $.ajaxSetup({
      headers: { 'X-CSRF-TOKEN': 
  $('meta[name="_token"]').attr('content') }
  });
  $.ajax({
      url      :"{{url('upload')}}",
      type: 'POST',
      data:new FormData($("#imagesform").get(0)),
      contentType:false,
      processData:false,
      success: function (data) {
          var img = '<img src="{{asset(Storage::url('uploadedImages'))}}/'+data+'" width="100" height="100" id="insertedImages">';
         $("#insertedImages").html(img);  
         alert("Uploaded OK!")
      },

  });
  return false;
  });
   });

 </script>

Answer 2

首先，您要上传图像数组并返回一个变量，该变量仅返回最后上传的文件的名称。相反，创建并返回上传文件的文件名数组。

public function uploadSubmit(UploadRequest $request)
{
    $product = Product::create($request->all());
   $filenames = array();
    foreach ($request->images  as $photo) {
       $filename = $photo->store('uploadedImages');
       $filename = substr($filename,15);
       $filenames[] = asset('storage/app/uploadedImages/'.$filename);
        ProductsPhoto::create([
            'product_id' => $product->id,
            'filename' => $filename
        ]);
    }

      return response()->json($filenames);
   }

然后确保运行

php artisan storage:link

在

storage

目录中创建

public

目录的符号链接。

<script type="text/javascript">
  $(document).ready(function(){

  $("#imagesform").submit(function(){


      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': 
      $('meta[name="_token"]').attr('content') }
      });
      $.ajax({
          url      :"{{url('upload')}}",
          type: 'POST',
          data:new FormData($("#imagesform").get(0)),
          contentType:false,
          processData:false,
          success: function (data) {
            $.each(data, function( index, value ) {
               $("#insertedImages").append('<img src="'+value+'">');
             });
          },

      });
      return false;
      });
       });

     </script>

Answer 3

我有同样的问题...图像是公开的：storage/images/image.png，当我尝试这样做时，路线是（http://127.0.0.1:8000/dashboard/category）

success:function(response){
                        
                       =
                        $.each(response.res,function(key, subcat){
                            $('#table').append('<div  class="flex min-w-10 items-center justify-start gap-2 py-2"}`>\
               <img src="/storage/assets/images/subcat/'+subcat.image+')" class="w-16" alt="image">\);

不工作BCS我得到这个作为网址http://127.0.0.1:8000/dashboard/category/storage/assets/images/subcat/image.png 这是一个 404 错误