七牛云上传--官方JSDK与photoClip截图Base64编码

最新推荐文章于 2022-06-09 19:33:34 发布

渝木木

最新推荐文章于 2022-06-09 19:33:34 发布

阅读量1.7k

点赞数

分类专栏：学习笔记七牛云图片上传 photoClip截 javascript base64编码文章标签： base64 七牛编码 php sdk

本文链接：https://blog.csdn.net/qq_17313509/article/details/78624221

版权

本文详细介绍了如何使用七牛云服务进行图片上传，包括PHP后台生成uploadtoken，前端使用七牛官方JSDK上传原图，通过photoClip截图生成Base64编码图片，以及将Base64编码图片上传到七牛云的完整流程。同时，文中提及了可能遇到的地域问题和关键代码示例。

摘要由CSDN通过智能技术生成

主要
1、php后台生成七牛云uploadtoken
2、前端使用官方JSDK上传原图
3、photoClip截图生成Base64图片
4、上传base64 编码图片到七牛云

php后台生成uploadtoken

下载php的SDK，然后引用SDK中的Auth即可：
七牛云官方php的SDK

use Think\Controller;
use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
use Org\Net\Http;
class QiniuLogic extends Controller{
   
    public function get_token(){
   
        $accessKey = C("QINIU_ACCESS"); //这个是七牛云账号的access
        $secretKey = C("QINIU_SECRET"); //这个是七牛云账号的secret
        $bucket = C("QINIU_BUCKET");    //这个是七牛云的内容空间
        vendor("Qiniu/autoload");
        $auth = new Auth($accessKey, $secretKey);
        $policy = array(
            "scope"=>$bucket.":".$accessKey,
            "insertOnly"=>0
        );
        $uptoken = $auth->uploadToken($bucket, null, 36000, $policy);
        $this->assign("QiniuToken",$uptoken);           //我们要的token，必需
        $this->assign("QiniuDomain",C("QINIU_DOMAIN")); //这个是cname后的域名，非必须
    }
}

前端页面使用官方JSDK上传原图

首先，下载一个官方的JSDK
然后在html页面中引用js，官方文档中引用的比较多，这里引用两个：plupload.full.min.js和qiniu.min.js就够用了。
上传过程中可能出现地域的问题：
常见问题处理

html页面

    <div>
        <img id="image" src='{$gradeImg}' />
        <input type="hidden" id="qiniu-uptoken" value="{$QiniuToken}">
        <input type="hidden" id="qiniu-domain" value="{$QiniuDomain}">
        <input type="hidden" id="image_original" value="{$gradeImg}">
    </div>
    <!--七牛云直接上传，这里可以参考官方的文档-->
    <div id="qiniu-upload-container" style="display: none;">
        <button id="qiniu-upload-btn" class="btn btn-success">
            上传
        </button>
        <div id="fsUploadProgress">
        </div>
    </div>
    <!--七牛云直接上传end-->
    <!--七牛云图直接上传,upload.js 是自己需要写的，其它两个是SDK文件的-->
<script src="../qiniu/plupload/plupload.full.min.js"></script>
<script src="../qiniu/dist/qiniu.min.js"></script>
<script src="../qiniu/js/upload.js"></script>
<!--七牛云图直接上传end-->

JavaScript-upload.js

官方文档中有很多内容，这里做了一些简化：
主要修改‘FileUploaded’，‘key’和 randStr() 方法

$(function () {
   
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',
        browse_button: 'qiniu-upload-btn',
        container: 'qiniu-upload-container',
        drop_element: '',
        max_file_size: '10mb',
        flash_swf_url: 'bower_components/plupload/js/Moxie.swf',
        dragdrop: false,
        chunk_size: '2mb',
        multi_selection: !(mOxie.Env.OS.toLowerCase()==="ios"),
        uptoken: $('#qiniu-uptoken').val(),
        domain: $('#qiniu-domain').val(),
        get_new_uptoken: false,
        auto_start: true,
        log_level: 5,
        init: {
            'FilesAdded': function(up, files) {
   
                $("#qiniu-upload-btn").html("正在上传中..."