• 首先,要去七牛云申请一个账号,并且要有一个已经备案的域名。
    然后就可以开始写程序了。
  • 使用以下代码安装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 '图片上传错误';
              }
          }
      }
  • 最后成功的效果
    成功图片
Last modification:September 3, 2020
如果觉得我的文章对你有用,请随意赞赏