使用vue-image-crop-upload剪裁图片通过thinkphp5上传到七牛云

在此工作之前必须有七牛云账号和七牛云已经创建好的空间，在账号中可以获取到 ACCESSKEY 和 SECRETKEY。

vue-image-crop-upload的使用方法可以参考官方的用法，如何需要满足自己的需求，可进行一定的修改再封装成自己的组件进行使用。

vue-image-crop-upload前端代码：

<a class="btn" @click="toggleShow">设置头像</a>
<my-upload
  @crop-success="cropSuccess"
  @crop-upload-success="cropUploadSuccess"
  @crop-upload-fail="cropUploadFail"
  v-model="show"
  :width="300"
  :height="300"
  url="你的PHP上传接口"
  :params="params"
  :headers="headers"
  :withCredentials="cross"
  img-format="png">
</my-upload>
<img :src="imgDataUrl" alt="">

import 'babel-polyfill';
import myUpload from 'vue-image-crop-upload'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Vue剪裁图片上传',
      show: false,
      params: {
        bucket: 'dawjvideo-1'
      },
      imgDataUrl: ''
    }
  },
  components: {
    'my-upload': myUpload
  },
  methods: {
    toggleShow(){
      this.show = !this.show;
    },
    cropUploadSuccess(jsonData,field){
      this.imgDataUrl = jsonData.data;
    }
  }
}

后端代码：

先进行下载七牛云的php-sdk，在接口PHP文件：

// 引入鉴权类
use Qiniu\Auth;
// 引入上传类
use Qiniu\Storage\UploadManager;
require_once __DIR__ . '-你自己的资源路径-/autoload.php';
//Vue开发需要处理跨域，如果有其他需求，自行添加
header('Access-Control-Allow-Origin:http://localhost:8080');
//跨域时先有options请求，为了避免出现问题，判断必须是post请求
if (Request::instance()->isPost()) {
  //获取前端传递过来的空间名称
  @$bucket = $request -> post('bucket');
  if(!$bucket){
      return data_json('必须传入空间名',300);
  }
  if(empty($_FILES)){
      return data_json('没有发现上传的文件',300);
  }
  //获取config.php中配置的七牛云信息
  $accessKey = config('qiniu.ACCESSKEY');
  $secretKey = config('qiniu.SECRETKEY');
  // 构建鉴权对象
  $auth = new Auth($accessKey, $secretKey);
  // 生成上传Token
  $token = $auth->uploadToken($bucket);
  //获取图片临时文件
  $image = $_FILES["avatar"]["tmp_name"];
  //要生成的图片名字
  $imgname = md5(time().mt_rand(10, 99)).".png";
  // 初始化 UploadManager 对象并进行文件的上传。
  $uploadMgr = new UploadManager();
  // 调用 UploadManager 的 putFile 方法进行文件的上传。
  list($ret, $err) = $uploadMgr->putFile($token, $imgname, $image);
  if ($err !== null) {
     return data_json($err,300);
  } else {
     //根据返回的key和配置的七牛云空间信息返回图片的绝对路径
     return data_json(config('qiniu.BUCKET')[$bucket].'/'.$ret["key"],200);
  }
}

后端获取的file[name]必须与前端传递的一致，否则获取不到；我在使用thinkphp内置的方法获取file时获取不到，所以用了原生PHP获取file的方法。