laravel5.6 表单上传图片(多张)和文本

近期在学习中碰到了图片上传的功能,后面又添加了文本的上传和保存.

工具:VS code

环境:win10  homestead

页面代码:

<form action="{{route('addd')}}" method="POST" enctype="multipart/form-data">

    <input type="file" name="img">

 <div class="form-group">
     <label for=""></label>
     <textarea name="text" id="home-text" class="form-control" cols="30" rows="10">                    
     </textarea>

</div>

   <input class="submit" type="submit" name="submit" value='上传'>
</form>

页面中注意事项:form表单中的enctype="multipart/form-data"必须存在!!!!!!!!!!!!!!!!!

在config文件夹目录下更改filesystems.php

'disks' => [
        'upload' =>[
            'driver' => 'local',
            'root' => 'uploadImages', 
        ],

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
        ],

    ],

];

新增"disk"中的upload,包括存储位置以及路径.

建立路由(测试时使用的any和post):

//图片上传
Route::any('/upload','UploadController@upload')->name('upload');
Route::post('/uuuu','UploadController@add')->name('addd');

现在我们需要建立图片和文本保存的地方:

使用命令行建立:php artisan make:controller UploadController

php artisan make:migration create_images_table

php artisan make:migration create_texts_table

images表中字段属性包括:id(自增)       user_id(上传者 int)     url(保存地址 string)

texts表中字段属性 包括:id(自增)           user_id(上传者  int)    text(文本   string)

这些整理好之后我们来执行:php artisan migrate(数据库迁移)

还有一部很重要的事情:建立Image和Text模型(我的放在了App\Models文件夹下)

下面来说控制器UploadController中的操作:

class UploadController extends Controller
{
    
    public function upload()
    {
        return view('upload');
    }

    public function add(Request $request)
    {
        if ($request->isMethod('POST')) {
            //$input = Request::all();
            $input = $request->text;
            $text = new Text();
            //$text->user_id=auth('student')->user()->id;
            $text->user_id = 455;
            $text->text = $input;

            $text->save();



            $file = $request->file('fileTrans');

            if ($file) {

                //以数组形式打印
                foreach ($file as $fil => $f) {


                    $extension = $f->extension();

                    //dd($extension);


                    $rule = ['jpg', 'png', 'gif', 'jpeg'];

                    if (!in_array($extension, $rule)) {
                        return '图片格式错误';
                    }

                    //storeAs 上传文件时 修改名字   (文件名  路径  保存地)
                    //$storeResult = $f->storeAs('fileTrans/'.$extension, 'upload');
                    //$url = $f->storeAs('public', 'ymd');
                    // $storeResult = $f ->store(data('ymd'),'upload');
                    $name = md5(time() . rand(0, 999));
                    $storeResult = $f->storeAs('punblic', 'home' . $name . '.' . $extension);


                    $outPut[] = [
                        'extension' => $extension, //类型
                        'store_result' => $storeResult, //路径

                    ];
                    $image = new Image;
                    // $image->user_id = auth('student')->user()->id;
                    $image->user_id = 666;

                    $image->url = $storeResult;

                    $image->save();

                    return view('success');
                }
            } else {
                return view('/upload')->with('msg', '请添加至少一张图片');
            }
        }

    }
}

这时候我们需要注意的是在头部引入:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use App\Models\Image;
use App\Models\Text;

这样我们就能完成上传功能.

总体来说,功能能实现,由于是新手,可能存在大大小小的漏洞,后期进行完善.

上一篇:Kibana Query Language(KQL)


下一篇:安装sass时遇到Failed to build gem native extension