VueからLaravel 8パート2に画像を保存する

最初の部分では、この小さなチュートリアルのMVC側を設定しました.まず、作成時にデータポイントを設定する必要があります.Vueしたがって、そのファイルに頭を追加し、次のコードを追加します.

data() {
    return {
      form: {
        title: "",
        article: "",
        image: null,
      },
    };
  },

上記は、最初の部分で作成したフォームと一致します.Vueモデルは、フォームを使用するときに満たされます.
そこで、データとファイルを保存するバックエンドにデータを送る機能を作成する必要があります.

methods: {
    submitForm() {
      let data = new FormData();
      data.append('title', this.form.title);
      data.append('article', this.form.article);
      data.append('image', this.form.image);

      let config = {
      header : {
        'Content-Type' : 'image/png'
      }
    }
    axios.post("/api/blog/create", data, config)
      .then((response) => {
        this.successBool = true
        console.log(response);
      }).catch(
         this.errorBool = true
      );
    },
  },

したがって、開始するにはformdata ()関数を使用した変数を作成し、それぞれのV変数をそのデータ変数に追加します.そして、バックエンドがイメージがリクエストにあることに気づいているようにヘッダーをセットして、最終的に、我々はAxios呼び出しで一緒にすべてを縫い合わせます.
バックエンドでそのルートを設定して、呼び出しを期待するために、ルート/APIにヘッドオーバーします.PHPを追加し、次の行を追加します

//Blog posts
Route::group(['prefix' => 'blog'], function () {
    Route::post('create', 'BlogController@put');
});

API.PHPのルートファイルは自動的にルートにAPIを追加します、そして、我々のルート::グループは接頭語/ブログを加えます、そして、最後の部分はCreateを加えて、ブログコントローラPUTメソッドにルート全体を示します.だから、そこに頭をして、機能を追加しましょう.

//Create a blog post
    public function put(Request $request) {

        $article = new Blog;
        $article->title   = $request->input('title');
        $article->article = $request->input('article');

        //Save image to disk
        if($request->hasFile('image')) {
            $image = $request->file('image');
            Storage::putFileAs('images', $image, Carbon::now()->toDateString().'.'.$image->getClientOriginalExtension());
            $article->image_path = Carbon::now()->toDateString().'.'.$image->getClientOriginalExtension();
        } else {
            $article->image_path = 'holding.jpg';
        }

        $article->save();

        $data = [
            'status' => 200,
            'data'   => 'Blog post created successfully'
        ];

        return response($data);

    }

最初の部分は簡単です、我々はブログモデルをつかみ、タイトルと記事を保存します、そして、我々はイメージをチェックします、そして、それはそれを保存します.
話をしましょう

私たちは$イメージ

と呼ばれる変数を作成します

私たちは、ストレージフォルダのイメージと呼ばれるフォルダに$ imageを置きます.

私たちは、今日の日付をイメージ名と拡張子を追加します.

私たちはimagehedpath

としてデータベースにイメージ名を保存します
他のステートメントは単に保持を保存します.フロントエンドが使用する文字列は存在しません.
そして、私の人々は、我々がイメージをデータベースに保存して、フロントエンドで使用する方法です.
何か問題や質問があればすべてのステップをカバーすると思います