最近要做一個上傳文件到七牛的功能，沒看官方文檔之前認(rèn)為蠻簡單的，看完之后就蒙比了躯肌。太亂了吧，也許是搞的太晚了破衔，沒心思認(rèn)真看文檔清女。廢話不多說了
流程：前端先get后端的uptoken，選擇文件后上傳到七牛晰筛，七牛上傳成功重定向到設(shè)置的back頁面嫡丙，end
1.前端代碼（這里參考了[http://www.tuicool.com/articles/MZzE3eU] 和 [https://smohan.im/blog/ygbey7]）
//html
<el-form-item label="上傳附件">
<el-upload
class="upload-demo"
action="http://up.qbox.me/"
type="drag"
:accept="accepts"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:data="form" //uptoken 和key
:on-remove="handleRemove"
>
<el-button size="small" type="primary">點擊上傳</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png/zip文件拴袭，且不超過500kb</div>
</el-upload>
</el-form-item>
//js
export default {
data () {
return {
loading: false,
bucketHost: 'https://***********/', // 上傳圖片的外鏈域名,七牛設(shè)置的
form: { //存放獲取到uptoken 和 key
token: '', //需要經(jīng)過編譯，并不是直接復(fù)制七牛賬號里面的token
key: '' //這個key也不是七牛賬號的key曙博，key可以重命名上傳的文件名拥刻，其他作用不太記得了
},
accepts: 'image/jpeg, image/jpg, image/png, image/gif, application/zip, application/x-zip-compressed',
//運行上傳圖片和zip文件
}
},
mounted () {
this.getUptoken()//先從服務(wù)器請求uptoken
},
methods: {
getUptoken () {
let _this = this
this.$http.jsonp(this.rootUrl2 + '/uptoken.php', { emulateJSON: true })
.then(function (response) {
_this.form.token = response.body.data
})
},
beforeUpload (file) { //每次上傳文件之前設(shè)置key
let suffix = file.name
let key = encodeURI(`${suffix}`)
this.form.key = key
return this.form
}
2.php代碼，這個主要3個php文件還一個src文件夾是官方php SDK里面的復(fù)制過來就可以
uptoken.php
這里要注意了：ReturnUrl 和 ReturnBody首字母一定要大寫父泳，否則重定向不成功
<?php
require_once 'autoload.php';
header('Access-Control-Allow-Origin:*');
use Qiniu\Auth;
$bucket = 'gond*******'; //你要上傳七牛的空間名
$accessKey = '***********ak';
$secretKey = '************sk';
$auth = new Auth($accessKey, $secretKey);
//$upToken = $auth->uploadToken($bucket);
$policy = array(
//圖片上次成功后七牛重定向的鏈接般哼，不指定上傳成功會報303的錯
'ReturnUrl' => 'https://gongyicloud.com.cn/fileinfo.php',
'ReturnBody' => '{"fname": $(fname)}',
);
$upToken = $auth->uploadToken($bucket, null, 3600, $policy);
$array = array('code'=>'0','data' =>$upToken);
echo $_GET['callback'].'('.json_encode($array).')';
autoload.php
<?php
function classLoader($class)
{
$path = str_replace('\\', DIRECTORY_SEPARATOR, $class);
$file = __DIR__ . '/src/' . $path . '.php';
if (file_exists($file)) {
require_once $file;
}
}
spl_autoload_register('classLoader');
require_once __DIR__ . '/src/Qiniu/functions.php';
fileinfo.php
<?php
header('Access-Control-Allow-Origin:*');
$ret = base64_decode($_GET['upload_ret']);
$cbody = json_decode($ret, true);
$dn = 'https://gongyiclo*********d.com/'; //七牛你自己設(shè)置的外鏈默認(rèn)域名
error_log(print_r($cbody, true));
$url = $dn . $cbody['fname'];
error_log($url);
$stat_ = file_get_contents($url . '?stat');
$stat = json_decode($stat_, true);
$mtype = $stat['mimeType'];
$isImage = substr($mtype, 0, 6) == 'image/';
$array = array('code'=>'0','data' =>$url);
echo $_GET['callback'].'('.json_encode($array).')';
?>
