Хранение файла в общедоступном хранилище Laravel (ReactJS & Laravel)

Question

Я начинаю заниматься CMS, используя Laravel и ReactJS.это мой первый раз, чтобы использовать это.У меня проблема с хранением файла в публичном хранилище laravel.Я знаю, что это двойной вопрос.но мне нужно решить это.Спасибо.

1. Я начинаю тестировать вставку содержимого без файла.вывод (Успех)

2. Это моя проблема, когда я начинаю хранить файл в публичном хранилище, это выдает мне ошибку.

Мой входной файл:

<input type="file" name="image" class="form-control-file" accept="image/x-png,image/gif,image/jpeg" id="exampleFormControlFile1">

Это моя функция в моем контроллере:

public function save_home_content(Request $request)
{

    $content_page = $request->get('pageValue');
    $content_section = $request->get('sectionValue');
    $content_title = $request->get('titleValue');
    $content = $request->get('textValue');
    $content_link = $request->get('linkValue');

    $now = new DateTime();

    if($request->get('imageValue'))
    {
        $file = $request->get('imageValue');
        $content_type = $request->get('typeValue');


        $filename =  $request->file->getClientOriginalName();
        return $request->storeAs('public',$filename);

       try {

       }
       catch(\Exception $e)
       {
        return $e->getMessage();
       }
    }
}

Answer 1

шаг 1:

сначала создать папку внутри / storage / app / public каталог:

/ storage / app / public / загрузок <- внутри папки загрузки вы сохраните свои изображения </p>

шаг 2:

• предоставьте 777 разрешений для папки хранения
• запустить команду php artisan storage:link в терминале (это создаст символическую ссылку на содержимое вашей папки /storage внутри projectname/public/storage/)

шаг 3:

внутри вашего контроллера:

use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\Validator;

public function upload(Request $request){
      $validation = Validator::make($request->all(),
        [
            'image'=>'required|mimes:jpeg,jpg,png,gif|max:10000'
        ]);

        if ($validation->fails()){
            $response=array('status'=>'error','errors'=>$validation->errors()->toArray());  
            return response()->json($response);
        }

     if($request->hasFile('image')){

        $uniqueid=uniqid();
        $original_name=$request->file('image')->getClientOriginalName(); 
        $size=$request->file('image')->getSize();
        $extension=$request->file('image')->getClientOriginalExtension();

        $name=$uniqueid.'.'.$extension;
        $path=$request->file('image')->storeAs('public/uploads',$name);
        if($path){
            return response()->json(array('status'=>'success','message'=>'Image successfully uploaded','image'=>'/storage/uploads/'.$name));
        }else{
            return response()->json(array('status'=>'error','message'=>'failed to upload image'));
        }
    }

}

шаг 4:

ваш реактивный компонент

import React, { Component } from 'react';


class App extends Component {
  constructor(){
    super();
    this.handleSubmit=this.handleSubmit.bind(this);
  }

  handleSubmit(event){
      event.preventDefault();
      const fileInput = document.querySelector('#fileupload') ;
      const formData = new FormData();
      formData.append('image', fileInput.files[0]);

      fetch('/api/upload', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'multipart/form-data',
        },
        body: formData
      })
      .then(res => res.json())
      .then(data => {
          console.log(data)
      })

  }

  render() {
    return (
      <div className="App">
       <form method="POST" id="upload-image"  onSubmit={this.handleSubmit} encType="multipart/form-data">
          <input id="fileupload" type="file" name="image" required/>
          <button type="submit" id="btnUploadFile">Upload File</button>
       </form>
      </div>
    );
  }
}

export default App;

шаг 5:

Вы можете получить доступ к изображениям, используя путь => yourdomain.com/storage/uploads/imagename.jpg

в blade.php, к которому вы можете получить доступ, используя <img src="{{ asset('storage/uploads/imagename.jpg')}}"/>