使用vue-image-crop-upload剪裁圖片通過thinkphp5上傳到七牛雲
阿新 • • 發佈:2018-12-19
在此工作之前必須有七牛雲賬號和七牛雲已經建立好的空間,在賬號中可以獲取到 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的方法。