PHP后端上传
用composer安装SDK
composer require teg1c/thinkphp-qiniu-sdk
如果不行的话就在目录下的composer.json的require中添加
"teg1c/thinkphp-qiniu-sdk": "dev-master"
然后执行
composer update
在config文件夹里新建一个qiniu.php配置文件
<?php
return [
'accesskey'=>'',//你的accesskey
'secretkey'=>'',//你的secretkey
'bucket'=>'',//你的上传空间名称
'url'=>''//你的空间绑定的域名
];
修改vendor/teg1c/thinkphp-qiniu-sdk
文件夹下Qiniu.php
文件像这样
<?php
namespace tegic\qiniu;
use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
use think\Exception;
require 'qiniu_php_driver/autoload.php';
class Qiniu
{
private $_accessKey;
private $_secretKey;
private $_bucket;
private $_error;
/**
* Qiniu constructor.
* @param string $accessKey
* @param string $secretKey
* @param string $bucketName
* 初始化参数
*/
public function __construct($accessKey = "", $secretKey = "", $bucketName = "")
{
if (empty($accessKey) || empty($secretKey) || empty($bucketName)) {
if (empty(config('qiniu.accesskey')) || empty(config('qiniu.secretkey')) || empty(config('qiniu.bucket'))) {
$this->_error = '配置信息不完整';
return false;
}
$this->_accessKey = config('qiniu.accesskey');
$this->_secretKey = config('qiniu.secretkey');
$this->_bucket = config('qiniu.bucket');
} else {
$this->_accessKey = $accessKey;
$this->_secretKey = $secretKey;
$this->_bucket = $bucketName;
}
}
/**
* @return bool|string
* 获取bucket
*/
private function _getBucket()
{
return $this->_bucket;
}
/**
* @param string $saveName
* @param string $bucket
* @return mixed
* @throws Exception
* @throws \Exception
* 单文件上传,如果添加多个文件则只上传第一个
*/
public function upload($saveName = '', $bucket = '')
{
$token = $this->_getUploadToken($bucket);
$files = $_FILES;
if (empty($files)) {
throw new Exception('没有文件被上传', 10002);
}
$values = array_values($files);
$uploadManager = new UploadManager();
if (empty($saveName)) {
$saveName = hash_file('sha1', $values[0]['tmp_name']) . time();
}
$infoArr = explode('.', $values[0]['name']);
$extension = array_pop($infoArr);
$fileInfo = $saveName . '.' . $extension;
list($ret, $err) = $uploadManager->putFile($token, $saveName, $values[0]['tmp_name']);
if ($err !== null) {
throw new Exception('上传出错' . serialize($err));
}
return $ret['key'];
}
public function getUploadToken()
{
$auth = new Auth($this->_accessKey, $this->_secretKey);
$upToken = $auth->uploadToken($this->_getBucket());
return $upToken;
}
}
引入SDK TP5.1框架vendor会自动加载
use tegic\qiniu\Qiniu;
上传
public function UpFile($file){
$qiniu = new Qiniu();
$key = $qiniu-> upload('要保存的图片名称','空间名');
return json([
"code"=>200,
"msg"=>"上传完成",
"data"=>"您的七牛云域名/".$key
]);
}
Base64上传
public function Base64($base64){
$base64 = trim($base64);
$base64 = str_replace('data:image/jpeg;base64,', '', $base64); //只要逗号后面的
$qiniu = new Qiniu();
$token = $qiniu->getUploadToken();
$ret = $this->request_by_curl('https://up.qiniup.com/putb64/-1', $base64, $token);
$key = json_decode($ret, true)['key'];
return json([
"code"=>200,
"msg"=>"上传完成",
"data"=>"您的七牛云域名/".$key
]);
}
public function request_by_curl($remote_server, $post_string, $upToken){
$headers = array();
$headers[] = 'Content-Type:image/png';
$headers[] = 'Authorization:UpToken ' . $upToken;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $remote_server);
//curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_string);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
Javascript前端上传
首先引入七牛的js
<script href="https://unpkg.com/qiniu-js@2.5.3/dist/qiniu.min.js"></script>
选择图片使用ajax上传
//上传图片
$('#upimg').on("change",
function() {
var file = this.files[0];
//获取上传凭证
$.ajax({
type: "POST",
url: "getToken",//获取上传凭证的接口
dataType: "json",
data: {
name: file.name
},
success: function(result) {
var key = result.key;
var token = result.token;
var config = {
region: qiniu.region.z1
};
var putExtra = {
mimeType: ["image/jpg", "image/png", "image/jpeg"]
};
var observable = qiniu.upload(file, key, token, putExtra, config);
observable.subscribe({
next: (res) = >{
// 主要用来展示进度
let total = res.total;
console.log("进度:" + parseInt(total.percent) + "%");
},
error: (err) = >{
// 失败报错信息
console.log(err)
},
complete: (res) = >{
// 接收成功后返回的信息
console.log(res)
}
});
}
});
});
上传Base64图片
//dataURL 是base64数据
var pic = dataURL.replace('data:image/jpeg;base64,' ,'') //base64后的字符串
var url = "https://upload-z1.qiniup.com/putb64/-1"; //非华东空间需要根据注意事项
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=()=>{
if (xhr.readyState==4){
var dataInfo = JSON.parse(xhr.response) //将返回的字符串转化为JSON对象
console.log(dataInfo);
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", 'UpToken {$token}');//替换上传token
xhr.send(pic);
后端的凭证接口
//返回图片上传所需要的参数
public function getToken()
{
if(Request::isAjax()){
$qiniu = new Qiniu();
return [
'key' => createImgName() . '-' . input('post.name'),
'token' => $qiniu->getUploadToken()
];
}
}
网友评论