在此工作之前必須有七牛雲賬號和七牛雲已經建立好的空間，在賬號中可以獲取到 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的方法。