将文件存储到 Laravel 的公共存储（ReactJS 和 Laravel）

Question

我开始使用 Laravel 和 ReactJS 做 CMS。这是我第一次使用它。我在将文件存储到 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/uploads

第 2 步：

• 授予777存储文件夹权限
• 在终端中运行php artisan storage:link 命令（这将在projectname/public/storage/ 中创建/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'));
        }
    }

}

第四步：

你的反应组件

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')}}"/> 访问