📜  laravel flutter 将图像保存在数据中 - PHP (1)

📅  最后修改于: 2023-12-03 15:02:34.954000             🧑  作者: Mango

Laravel Flutter将图像保存在数据库中 - PHP

在此文档中,我们将探讨如何使用Laravel和Flutter将图像保存在数据库中。

什么是Laravel?

Laravel是一种基于PHP编程语言的开源Web应用程序框架,它使用MVC(模型-视图-控制器)架构。 Laravel可以帮助您构建高质量和可扩展的Web应用程序。

什么是Flutter?

Flutter是一个用于构建高性能、高保真度、具有灵活UI的移动应用程序的UI框架。Flutter由Google开发,可让您使用单个代码库构建应用程序,并将其部署到多个平台。

将图像保存在Laravel数据库中

下面是在Laravel中将图像保存在数据库中的步骤:

1.创建数据库表

首先,我们需要创建一个数据表来保存图像。我们可以使用下面的命令创建一个数据表:

php artisan make:migration create_images_table --create=images

执行以上命令后,我们将会得到一个名为 create_images_table 的数据库迁移文件。在这个迁移文件中,我们使用下面的代码定义 images 数据表:

Schema::create('images', function (Blueprint $table) {
            $table->id();               
            $table->string('filename');
            $table->binary('image');      
            $table->timestamps();
        });
2.创建Laravel存储器

接下来,我们需要创建一个Laravel存储器来保存我们的图像。我们可以使用下面的命令创建一个存储器:

php artisan storage:link

执行以上命令后,Laravel将在public目录下创建一个storage符号链接,并将它指向storage/app/public目录。

3.编写Laravel控制器

接下来,我们需要编写一个Laravel控制器来处理保存图像的逻辑。我们可以使用下面的代码创建一个控制器:

php artisan make:controller ImageController --resource

在此控制器中,我们可以使用以下代码来保存图像:

public function store(Request $request)
    {
        $filename = $request->file('image')->getClientOriginalName();
        $image = $request->file('image')->get();
     
        $id = DB::table('images')->insertGetId([
            'filename' => $filename,
            'image' => $image
        ]);
     
        return view('image.viewimage',['id'=>$id]);
    }
4.创建Laravel路由

最后,我们需要创建一个Laravel路由来将我们的控制器与浏览器访问相关联。我们可以在routes/web.php文件中使用下面的代码创建一个路由:

Route::post('image/upload', '[ImageController::class, "store"]')->name('image.upload');
将图像保存在Flutter数据库中

下面是在Flutter中将图像保存在数据库中的步骤:

1.连接Flutter到Laravel

首先,我们需要通过将Flutter应用程序连接到Laravel后端来启动我们的应用程序。我们可以使用下面的代码来连接到Laravel:

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';

...
  
Future uploadImage(File imageFile) async {
    String fileName = imageFile.path.split('/').last;

    var request = http.MultipartRequest('POST', Uri.parse("http://localhost:8000/image/upload"));
    request.files.add(await http.MultipartFile.fromPath('image', imageFile.path));
    var response = await request.send();

    print(response.statusCode);
    response.stream.transform(utf8.decoder).listen((value) {
      print(value);
    });
  }

...
2.使用Flutter Image Picker

接下来,我们需要使用Flutter Image Picker插件来处理图像选择逻辑。

我们可以使用下面的代码创建一个图像选择器:

Future<File> chooseImage() async {
    var pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
    return File(pickedFile.path);
  }
3.将图像上传到Laravel

最后,我们需要使用Flutter http库将图像上传到我们在Laravel中创建的控制器。

我们可以使用以下代码将图像上传到Laravel:

onPressed: () async {
              var imageFile = await chooseImage();          
              uploadImage(imageFile!); 
              });
结论

以上就是使用Laravel和Flutter将图像保存在数据库中的完整指南。

我们已经学习了如何在Laravel中保存图像并将其与Flutter应用程序连接起来。

如果您跟上本文中的步骤并成功地执行了它们,那么您应该能够建立一个能够将图像上传到Laravel并在Flutter应用程序中保存的完整系统。