使用laravel+vue+ElementUI+七牛云搭建一个简单的图床

首先，要去七牛云申请一个账号，并且要有一个已经备案的域名。
然后就可以开始写程序了。

使用以下代码安装laravel6.X的最新版本

composer create-project --prefer-dist laravel/laravel picture "6.*"

因为本次使用前后端不分离开发，所以不用安装laravel-cors跨域包
前端代码一个大佬给写好了，所以直接贴代码

  <div id="app">
      <div class="upload">
          <el-upload class="upload-demo" drag action= "http://127.0.0.1:5000/up_photo" :on-success="handleAvatarSuccess">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
          </el-upload>
      </div>
      <div class="input">
          图片链接
          <el-input v-model="back_url"></el-input>
      </div>
  </div>
</body>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          back_url: '',
          file: '',
      },

      methods: {
          handleAvatarSuccess(response, file, fileList) {
              const item = this;
              console.log(response+file+fileList);
              this.back_url = response;
          }
      },
  })
</script>

PS：只展示关键代码
使用以下命令安装七牛云的SDK，用来上传文件
```
composer require itbdw/laravel-storage-qiniu
```
config/app.php 里面的 providers 加上一行 itbdw\QiniuStorage\QiniuFilesystemServiceProvider::class,

config/filesystems.php 里面的 disks数组加上

'qiniu' => [
            'driver'    => 'qiniu',
            'domain'    => 'xxxxx.bkt.clouddn.com',  //你的七牛域名
            'access_key'=> '',    //AccessKey
            'secret_key'=> '',   //SecretKey
            'bucket'    => '',    //Bucket名字
        ],

将前端页面重命名为picture.blade.php
然后复制到resoures/views里面

修改routes/web.php

Route::get('/', function () {
  return view('picture');
});

输入以下命令新建一个图片上传控制器
```
php artisan make:controller UploadController
```
因为有CSRF问题，需要在routes/api.php里面增加一个上传路由
```
Route::post('up','UploadController@uploadpicture');
```

在新的控制器里增加一个上传方法，代码如下

public function uploadpicture(Request $request)
  {
      $this->validate(request(), [
          'file' => 'required|image',
      ]);
      if ($request->hasFile('file') && $request->file('file')->isValid()) {
          $path = md5(time() . rand(100000, 999999)) . $request->file('file')->getClientOriginalName();
          $img = 'http://picture.105577.xyz/'.$path;
          $res = \Storage::disk('qiniu')->writeStream($path, fopen($request->file('file'), 'r'));
          if ($res) {
              return $img;
          } else {
              return '图片上传错误';
          }
      }
  }