码迷,mamicode.com
首页 > 微信 > 详细

微信小程序/网站 上传图片到腾讯云COS

时间:2018-05-15 01:47:17      阅读:380      评论:0      收藏:0      [点我收藏+]

标签:php版本   load   eth   tle   tmp   color   XA   腾讯云   oda   

COS简介: 腾讯云提供的一种对象存储服务,供开发者存储海量文件的分布式存储服务。可以将自己开发的应用的存储部分全部接入COS的存储桶中,有效减少应用服务器的带宽,请求等。个人也可以通过腾讯云账号免费使用COS6个月,https://cloud.tencent.com/product/cos

整体流程简介: 

1. 前端引入cos的SDK文件

2. 监听上传控件,并在图片加载至网页临时流中发起签名请求

3.后端根据上传的请求方式和路径参数返回签名Authorization和token XCosSecurityToken

4.前端再根据返回的参数和SDK以3的请求方式上传图片。

PHP签名返回流程:

1.在腾讯云的建好存储桶并配置CORS规则https://cloud.tencent.com/document/product/436/11459

2.在平台上拿到Bucket(存储桶),Region(地域),SecretId,SecretKey等参数。

3.使用(SecretId,Timestamp…)参数进行签名通过腾讯云的接口获取临时密钥,返回给前端的token也在临时密钥中

4.根据前端传的(上传请求方式,路径)和临时密钥进行签名(前端上传所使用的)并返回。

一、PHP获取签名部分(tp5)

<?php
// +----------------------------------------------------------------------
// | When work is a pleasure, life is a joy!
// +----------------------------------------------------------------------
// | User: 傅超|  Email:1741108471@qq.com | Time:2018/04/21 17:55
// +----------------------------------------------------------------------
// | TITLE: 小程序接口
// +----------------------------------------------------------------------

namespace app\v1\controller;

use think\Request;
use think\Db;
use app\v1\location\Location;
use think\Cache;
use \app\v1\auth\AccessToken;
use \app\v1\extend\Loginlog;

// 返回数据给前端
header(‘Content-Type: application/json‘);
header(‘Allow-Control-Allow-Origin: *‘);       // 这里修改允许跨域访问的网站
// header(‘Allow-Control-Allow-Origin: http://127.0.0.1‘);       // 这里修改允许跨域访问的网站
//header(‘Allow-Control-Allow-Origin: http://mer.runmoneyin.com‘); // 这里修改允许跨域访问的网站
header(‘Allow-Control-Allow-Headers: origin,accept,content-type‘);


/**
 * Class  Cosauth
 * @title 获取腾讯云cos签名接口
 * @url   http://119.29.10.64/v1/Cosauth
 * @desc  小程序接口包含:获取上传图片签名
 * @version 1.0
 */
class Cosauth extends Base
{
    // 附加方法
    protected $extraActionList = [‘getCosAuth‘, ‘getCosAuth‘];

    // 跳过验证方法
    protected $skipAuthActionList = [‘getCosAuth‘, ‘getCosAuthEsay‘];

    // appid
    //protected $appid = ‘wx4c0e1852239664b4‘;

    // cos配置参数
    protected $config = array(
        ‘Url‘         => ‘https://sts.api.qcloud.com/v2/index.php‘,
        ‘Domain‘      => ‘sts.api.qcloud.com‘,   
        ‘Proxy‘       => ‘‘,
        ‘SecretId‘    => ‘AK********************BLK9nF5dZL‘, // 固定密钥
        ‘SecretKey‘   => ‘jHj5G*********************IUcqJu‘,     // 固定密钥
        ‘Bucket‘      => ‘activity-1255484416‘,               // 存储桶
        ‘Region‘      => ‘ap-guangzhou‘,
        ‘AllowPrefix‘ => ‘*‘, // 这里改成允许的路径前缀,这里可以根据自己网站的用户登录态判断允许上传的目录,例子:* 或者 a/* 或者 a.jpg
    );

    /**
     * @title 获取签名入口
     * http://119.29.10.64/v1/Cosauth/getCosAuth
     */
    public function getCosAuth() {
        // $data[‘say‘] = ‘hello‘;
        // echo json_encode($data);
        // die;

        // 缓存临时密钥
        if (!isset($_SESSION[‘tempKeysCache‘])) {
            $_SESSION[‘tempKeysCache‘] = array(
                ‘policyStr‘ => ‘‘,
                ‘expiredTime‘ => 0
            );
        }

        // 获取前端过来的参数
        // $method = isset($_GET[‘method‘]) ? $_GET[‘method‘] : ‘get‘;
        // $pathname = isset($_GET[‘pathname‘]) ? $_GET[‘pathname‘] : ‘/‘;
        
        $method   = input(‘method‘) ? input(‘method‘) : ‘post‘;
        $pathname = input(‘pathname‘) ? input(‘pathname‘) : ‘/‘;
        $callback = input(‘callback‘) ? input(‘callback‘) : ‘‘;    // 前端跨域的jsonp参数(可忽略)

        // 获取临时密钥,计算签名
        $tempKeys = $this->getTempKeys();

        if ($tempKeys && $tempKeys[‘credentials‘]) {

            // $datas = $this->getAuthorization($tempKeys, $method, $pathname);
            // echo json_encode($datas);
            // die;
            $data = array(
                ‘Authorization‘ => $this->getAuthorization($tempKeys, $method, $pathname),
                ‘XCosSecurityToken‘ => $tempKeys[‘credentials‘][‘sessionToken‘],
            );

        } else {
            $data = array(‘error‘=> $tempKeys);
        }

        //echo $callback . ‘(‘ . json_encode($data) . ‘)‘;     // 通过回调返回给其他域(可忽略)
        echo json_encode($data);     // 正常写法的返回
        die;
    }


    // json 转 query string
    public function json2str($obj, $notEncode = false) {
        ksort($obj);
        $arr = array();
        foreach ($obj as $key => $val) {
            !$notEncode && ($val = urlencode($val));
            array_push($arr, $key . ‘=‘ . $val);
        }
        return join(‘&‘, $arr);
    }

    // 计算临时密钥用的签名
    public function getSignature($opt, $key, $method) {
        //global $config;
        $formatString = $method . $this->config[‘Domain‘] . ‘/v2/index.php?‘ . $this->json2str($opt, 1);
        $sign = hash_hmac(‘sha1‘, $formatString, $key);
        $sign = base64_encode(hex2bin($sign));
        return $sign;
    }

    // 获取临时密钥
    public function getTempKeys() {

        //global $config;

        // 判断是否修改了 AllowPrefix
        if ($this->config[‘AllowPrefix‘] === ‘_ALLOW_DIR_/*‘) {
            return array(‘error‘=> ‘请修改 AllowPrefix 配置项,指定允许上传的路径前缀‘);
        }

        $ShortBucketName = substr($this->config[‘Bucket‘],0, strripos($this->config[‘Bucket‘], ‘-‘));
        $AppId = substr($this->config[‘Bucket‘], 1 + strripos($this->config[‘Bucket‘], ‘-‘));
        $policy = array(
            ‘version‘=> ‘2.0‘,
            ‘statement‘=> array(
                array(
                    ‘action‘=> array(
                        // 简单文件操作
                        ‘name/cos:PutObject‘,
                        ‘name/cos:PostObject‘,
                        ‘name/cos:AppendObject‘,
                        ‘name/cos:GetObject‘,
                        ‘name/cos:HeadObject‘,
                        ‘name/cos:OptionsObject‘,
                        ‘name/cos:PutObjectCopy‘,
                        ‘name/cos:PostObjectRestore‘,
                        // 分片上传操作
                        ‘name/cos:InitiateMultipartUpload‘,
                        ‘name/cos:ListMultipartUploads‘,
                        ‘name/cos:ListParts‘,
                        ‘name/cos:UploadPart‘,
                        ‘name/cos:CompleteMultipartUpload‘,
                        ‘name/cos:AbortMultipartUpload‘,
                    ),
                    ‘effect‘=> ‘allow‘,
                    ‘principal‘=> array(‘qcs‘=> array(‘*‘)),
                    ‘resource‘=> array(
                        ‘qcs::cos:‘ . $this->config[‘Region‘] . ‘:uid/‘ . $AppId . ‘:prefix//‘ . $AppId . ‘/‘ . $ShortBucketName . ‘/‘,
                        ‘qcs::cos:‘ . $this->config[‘Region‘] . ‘:uid/‘ . $AppId . ‘:prefix//‘ . $AppId . ‘/‘ . $ShortBucketName . ‘/‘ . $this->config[‘AllowPrefix‘]
                    )
                )
            )
        );

        $policyStr = str_replace(‘\\/‘, ‘/‘, json_encode($policy));
        $Action = ‘GetFederationToken‘;
        $Nonce = rand(10000, 20000);
        $Timestamp = time() - 1;
        $Method = ‘GET‘;

        $params = array(
            ‘Action‘=> $Action,
            ‘Nonce‘=> $Nonce,
            ‘Region‘=> ‘‘,
            ‘SecretId‘=> $this->config[‘SecretId‘],
            ‘Timestamp‘=> $Timestamp,
            ‘durationSeconds‘=> 7200,
            ‘name‘=> ‘‘,
            ‘policy‘=> $policyStr
        );
        $params[‘Signature‘] = urlencode($this->getSignature($params, $this->config[‘SecretKey‘], $Method));

        $url = $this->config[‘Url‘] . ‘?‘ . $this->json2str($params, 1);
        $ch = curl_init($url);
        $this->config[‘Proxy‘] && curl_setopt($ch, CURLOPT_PROXY, $this->config[‘Proxy‘]);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,0);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $result = curl_exec($ch);
        if(curl_errno($ch)) $result = curl_error($ch);
        curl_close($ch);

        $result = json_decode($result, 1);
        $_SESSION[‘tempKeysCache‘] = $result[‘data‘];
        $_SESSION[‘tempKeysCache‘][‘policyStr‘] = $policyStr;

        return $result[‘data‘];
    }

    // 计算 COS API 请求用的签名
    public function getAuthorization($keys, $method, $pathname)
    {

        // 获取个人 API 密钥 https://console.qcloud.com/capi
        $SecretId = $keys[‘credentials‘][‘tmpSecretId‘];
        $SecretKey = $keys[‘credentials‘][‘tmpSecretKey‘];

        // 整理参数
        $query = array();
        $headers = array();
        $method = strtolower($method ? $method : ‘get‘);
        $pathname = $pathname ? $pathname : ‘/‘;
        substr($pathname, 0, 1) != ‘/‘ && ($pathname = ‘/‘ . $pathname);

        // 工具方法
        function getObjectKeys($obj)
        {
            $list = array_keys($obj);
            sort($list);
            return $list;
        }

        function obj2str($obj)
        {
            $list = array();
            $keyList = getObjectKeys($obj);
            $len = count($keyList);
            for ($i = 0; $i < $len; $i++) {
                $key = $keyList[$i];
                $val = $obj[$key] ? $obj[$key] : ‘‘;
                $key = strtolower($key);
                $list[] = rawurlencode($key) . ‘=‘ . rawurlencode($val);
            }
            return implode(‘&‘, $list);
        }

        // 签名有效起止时间
        $now = time() - 1;
        $expired = $now + 3600; // 签名过期时刻,600 秒后

        // 要用到的 Authorization 参数列表
        $qSignAlgorithm = ‘sha1‘;
        $qAk = $SecretId;
        $qSignTime = $now . ‘;‘ . $expired;
        $qKeyTime = $now . ‘;‘ . $expired;
        $qHeaderList = strtolower(implode(‘;‘, getObjectKeys($headers)));
        $qUrlParamList = strtolower(implode(‘;‘, getObjectKeys($query)));


        // 签名算法说明文档:https://www.qcloud.com/document/product/436/7778
        // 步骤一:计算 SignKey
        $signKey = hash_hmac("sha1", $qKeyTime, $SecretKey);

        // 步骤二:构成 FormatString
        $formatString = implode("\n", array(strtolower($method), $pathname, obj2str($query), obj2str($headers), ‘‘));

        // 自定义头部(暂时关闭)
        // header(‘x-test-method‘, $method);
        // header(‘x-test-pathname‘, $pathname);

        // 步骤三:计算 StringToSign
        $stringToSign = implode("\n", array(‘sha1‘, $qSignTime, sha1($formatString), ‘‘));

        // 步骤四:计算 Signature
        $qSignature = hash_hmac(‘sha1‘, $stringToSign, $signKey);

        // 步骤五:构造 Authorization
        $authorization = implode(‘&‘, array(
            ‘q-sign-algorithm=‘ . $qSignAlgorithm,
            ‘q-ak=‘ . $qAk,
            ‘q-sign-time=‘ . $qSignTime,
            ‘q-key-time=‘ . $qKeyTime,
            ‘q-header-list=‘ . $qHeaderList,
            ‘q-url-param-list=‘ . $qUrlParamList,
            ‘q-signature=‘ . $qSignature
        ));

        return $authorization;
    }

 /*********************************************************************************************************************************************/

//     // cos配置参数
//     protected $config = array(
//         ‘Url‘         => ‘https://sts.api.qcloud.com/v2/index.php‘,
//         ‘Domain‘      => ‘sts.api.qcloud.com‘,   
//         ‘Proxy‘       => ‘‘,
//         ‘SecretId‘    => ‘AKIDwqbCewU2ZxABC3QDWp1EWrBLK9nF5dZL‘, // 固定密钥
//         ‘SecretKey‘   => ‘jHj5GIAvV8eFk3B8tSwKXYO4f0IUcqJu‘,     // 固定密钥
//         ‘Bucket‘      => ‘xcx-1255484416‘,
//         ‘Region‘      => ‘ap-guangzhou‘,
//         ‘AllowPrefix‘ => ‘*‘, // 这里改成允许的路径前缀,这里可以根据自己网站的用户登录态判断允许上传的目录,例子:* 或者 a/* 或者 a.jpg
//     );
//     // $config = array(
//     //     ‘Url‘ => ‘https://sts.api.qcloud.com/v2/index.php‘,
//     //     ‘Domain‘ => ‘sts.api.qcloud.com‘,
//     //     ‘Proxy‘ => ‘‘,
//     //     ‘SecretId‘ => ‘AKIDxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx‘, // 固定密钥
//     //     ‘SecretKey‘ => ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx‘, // 固定密钥
//     //     ‘Bucket‘ => ‘test-1250000000‘,
//     //     ‘Region‘ => ‘ap-guangzhou‘,
//     //     ‘AllowPrefix‘ => ‘_ALLOW_DIR_/*‘, // 必填,这里改成允许的路径前缀,这里可以根据自己网站的用户登录态判断允许上传的目录,例子:* 或者 a/* 或者 a.jpg
//     // );
//     // json 转 query string
//     function json2str($obj, $notEncode = false) 
//     {
//         ksort($obj);
//         $arr = array();
//         foreach ($obj as $key => $val) {
//             !$notEncode && ($val = urlencode($val));
//             array_push($arr, $key . ‘=‘ . $val);
//         }
//         return join(‘&‘, $arr);
//     }

//     // 计算临时密钥用的签名
//     function getSignature($opt, $key, $method) 
//     {

//         $formatString = $method . $this->config[‘Domain‘] . ‘/v2/index.php?‘ . self::json2str($opt, 1);
//         $sign = hash_hmac(‘sha1‘, $formatString, $key);
//         $sign = base64_encode(hex2bin($sign));
//         return $sign;
//     }

//     // 获取临时密钥
//     function getTempKeys() 
//     {
//         // 判断是否修改了 AllowPrefix
//         if ($this->config[‘AllowPrefix‘] === ‘_ALLOW_DIR_/*‘) {
//             return array(‘error‘=> ‘请修改 AllowPrefix 配置项,指定允许上传的路径前缀‘);
//         }
// // dump($this->config);
//         $ShortBucketName = substr($this->config[‘Bucket‘],0, strripos($this->config[‘Bucket‘], ‘-‘));
//         $AppId = substr($this->config[‘Bucket‘], 1 + strripos($this->config[‘Bucket‘], ‘-‘));
//         $policy = array(
//             ‘version‘=> ‘2.0‘,
//             ‘statement‘=> array(
//                 array(
//                     ‘action‘=> array(
//                         // // 这里可以从临时密钥的权限上控制前端允许的操作
//                           ‘name/cos:*‘, // 这样写可以包含下面所有权限
//                         // // 列出所有允许的操作
//                         // // ACL 读写
//                         // ‘name/cos:GetBucketACL‘,
//                         // ‘name/cos:PutBucketACL‘,
//                         // ‘name/cos:GetObjectACL‘,
//                         // ‘name/cos:PutObjectACL‘,
//                         // // 简单 Bucket 操作
//                         // ‘name/cos:PutBucket‘,
//                         // ‘name/cos:HeadBucket‘,
//                         // ‘name/cos:GetBucket‘,
//                         // ‘name/cos:DeleteBucket‘,
//                         // ‘name/cos:GetBucketLocation‘,
//                         // // Versioning
//                         // ‘name/cos:PutBucketVersioning‘,
//                         // ‘name/cos:GetBucketVersioning‘,
//                         // // CORS
//                         // ‘name/cos:PutBucketCORS‘,
//                         // ‘name/cos:GetBucketCORS‘,
//                         // ‘name/cos:DeleteBucketCORS‘,
//                         // // Lifecycle
//                         // ‘name/cos:PutBucketLifecycle‘,
//                         // ‘name/cos:GetBucketLifecycle‘,
//                         // ‘name/cos:DeleteBucketLifecycle‘,
//                         // // Replication
//                         // ‘name/cos:PutBucketReplication‘,
//                         // ‘name/cos:GetBucketReplication‘,
//                         // ‘name/cos:DeleteBucketReplication‘,
//                         // // 删除文件
//                         // ‘name/cos:DeleteMultipleObject‘,
//                         // ‘name/cos:DeleteObject‘,
//                         // 简单文件操作
//                         ‘name/cos:PutObject‘,
//                         ‘name/cos:PostObject‘,
//                         ‘name/cos:AppendObject‘,
//                         ‘name/cos:GetObject‘,
//                         ‘name/cos:HeadObject‘,
//                         ‘name/cos:OptionsObject‘,
//                         ‘name/cos:PutObjectCopy‘,
//                         ‘name/cos:PostObjectRestore‘,
//                         // 分片上传操作
//                         ‘name/cos:InitiateMultipartUpload‘,
//                         ‘name/cos:ListMultipartUploads‘,
//                         ‘name/cos:ListParts‘,
//                         ‘name/cos:UploadPart‘,
//                         ‘name/cos:CompleteMultipartUpload‘,
//                         ‘name/cos:AbortMultipartUpload‘,
//                     ),
//                     ‘effect‘=> ‘allow‘,
//                     ‘principal‘=> array(‘qcs‘=> array(‘*‘)),
//                     ‘resource‘=> array(
//                         ‘qcs::cos:‘ . $this->config[‘Region‘] . ‘:uid/‘ . $AppId . ‘:prefix//‘ . $AppId . ‘/‘ . $ShortBucketName . ‘/‘,
//                         ‘qcs::cos:‘ . $this->config[‘Region‘] . ‘:uid/‘ . $AppId . ‘:prefix//‘ . $AppId . ‘/‘ . $ShortBucketName . ‘/‘ . $this->config[‘AllowPrefix‘]
//                     )
//                 )
//             )
//         );

//         $policyStr = str_replace(‘\\/‘, ‘/‘, json_encode($policy));
//         $Action = ‘GetFederationToken‘;
//         $Nonce = rand(10000, 20000);
//         $Timestamp = time() - 1;
//         $Method = ‘GET‘;
//         $params = array(
//             ‘Action‘=> $Action,
//             ‘Nonce‘=> $Nonce,
//             ‘Region‘=> ‘‘,
//             ‘SecretId‘=> $this->config[‘SecretId‘],
//             ‘Timestamp‘=> $Timestamp,
//             ‘durationSeconds‘=> 7200,
//             ‘name‘=> ‘‘,
//             ‘policy‘=> $policyStr
//         );

//         $params[‘Signature‘] = urlencode(self::getSignature($params, $this->config[‘SecretKey‘], $Method));
//         $url = $this->config[‘Url‘] . ‘?‘ . self::json2str($params, 1);
//         $ch = curl_init($url);
//         $this->config[‘Proxy‘] && curl_setopt($ch, CURLOPT_PROXY, $this->config[‘Proxy‘]);
//         curl_setopt($ch, CURLOPT_HEADER, 0);
//         curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,0);
//         curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//         $result = curl_exec($ch);
//         if(curl_errno($ch)) $result = curl_error($ch);
//         curl_close($ch);
//         $result = json_decode($result, 1);
//         return $result[‘data‘];
//     }

//     public function getCosAuth() 
//     {
//         // 获取临时密钥,计算签名
//         $tempKeys = self::getTempKeys();
//         // 返回数据给前端
//         header(‘Content-Type: application/json‘);
//         header(‘Allow-Control-Allow-Origin: *‘); // 这里修改允许跨域访问的网站
//         header(‘Allow-Control-Allow-Headers: origin,accept,content-type‘);

//         echo json_encode($tempKeys);
//     }
}

 

二、javascript上传图片部分

首先去腾旭云下载cos-js-sdk-v5.min.js并引入页面,这里只展示实现部分

// 图片上传监听事件
function uploadConver(_this,event) {

	for(var i = 0;i<event.target.files.length;i++) {
        var files = event.target.files[i];

        if (!files) {
			tipPopup(‘未选择上传文件‘,1100,4);
			return;
		}

		files && uploadFile(files, function (err, data) {

			if(data) {
				$("#preImg").html("").append(‘<img src="‘+data.url+‘" width="200px"/>‘);
				//$("#conver").val(data.url);
				console.log(data);
			}else {
				console.log(err);
			}

			//console.log(err || data);
			//document.getElementById(‘msg‘).innerText = err ? err : (‘上传成功,ETag=‘ + data.ETag);
		});
        //uploadFileToOss(file);
        //console.log(file);
    }
}

// 异步请求上传签名
var getAuthorization = function (options, callback) {
        
     var xhr = new XMLHttpRequest();
     xhr.open(‘GET‘, url, true);
     xhr.onload = function (e) {
         var AuthData;
         try {
             AuthData = JSON.parse(xhr.responseText)
         } catch (e) {}
         if (AuthData && AuthData.Authorization) {
             callback(null, {
                 Authorization: AuthData.Authorization,
                 XCosSecurityToken: AuthData.XCosSecurityToken,
             });
            
         } else {
         	// alert(123);
             console.error(AuthData);
             callback(‘获取签名出错‘);
         }
     };
     xhr.onerror = function (e) {
         callback(‘获取签名出错‘);
     };
     xhr.send();
};

// 上传文件(真正上传到COS)
var uploadFile = function (file, callback) {

	if(file.size>1024*1024*2) {		// 限制图片大小2M
		layer.open({content: ‘上传的图片不能超过 2MB‘,skin: ‘msg‘,time: 3 });
		//tipPopup("上传的图片不能超过 2MB",1100,3);
		return;
	}

	if(file.type != ‘image/jpeg‘ && file.type != ‘image/png‘ && file.type != ‘image/gif‘) {		// 限制图片格式
		layer.open({content: ‘上传图片的格式不正确‘,skin: ‘msg‘,time: 3 });
		//tipPopup("上传图片的格式不正确",1100,3);
		return;
	}

	// 检测文件名不能含有中文汉字
	if(escape(file.name).indexOf(‘%u‘) != -1) {
		layer.open({content: ‘上传的文件名有中文,请重新上传‘,skin: ‘msg‘,time: 3 });
		return;
	}

	var dirBase = ‘temp2018/‘;
	var myDate = new Date();
	var reg = new RegExp( ‘/‘ , "g" );

	// var specilReg = /[@#\$\!()%-~+\^&\s*]+/g;;	// 过滤文件名的特殊字符
	// var fileName = file.name.replace(specilReg,‘‘);
	var files = (myDate.toLocaleDateString()).replace(reg,"")+‘/‘+myDate.getTime()+‘_‘+parseInt(Math.random()*100000)+‘_‘+file.name;
    var Key = dirBase+ files; // 这里指定上传目录和文件名
    
    // 执行获取签名函数,拿到签名通过回调上传
    getAuthorization({Method: ‘POST‘, Key: Key}, function (err, info) {
    	
        var fd = new FormData();
        fd.append(‘key‘, Key);
        fd.append(‘Signature‘, info.Authorization);
        fd.append(‘Content-Type‘, ‘‘);
        info.XCosSecurityToken && fd.append(‘x-cos-security-token‘, info.XCosSecurityToken);
        fd.append(‘file‘, file);
        var url = prefix;
        var xhr = new XMLHttpRequest();
        xhr.open(‘POST‘, url, true);
        xhr.onload = function () {
            if (Math.floor(xhr.status / 100) === 2) {
                var ETag = xhr.getResponseHeader(‘etag‘);
                callback(null, {url: url+Key, ETag: ETag});
            }else {
                callback(‘文件 ‘ + Key + ‘ 上传失败,状态码:‘ + xhr.status);
            }
        };
        xhr.onerror = function () {
            callback(‘文件 ‘ + Key + ‘ 上传失败,请检查是否没配置 CORS 跨域规则‘);
        };
        $("#preImg").html("").append(‘<span style="color:red">上传中……</span>‘);
        xhr.send(fd);

    });
};

----------------------------------------------------------------------------------------------------------

三、微信小程序上传方式

这里小程序就演示直接自己生成签名,然后通过cos的SDK提供的函数上传。

1.config.js 单独配置

var config = {
   Bucket: ‘busin-1256537792‘,//存储桶
    Region: ‘ap-guangzhou‘,//地域
    SecretId: ‘AKIDTtR************XiiW8nLLlp39yl4LW‘, 
    SecretKey: ‘hslO1YxFNJ5lGh0yR7c4Qemi8VhPRhmf‘, //replace with yours
}

module.exports = config

2.实现上传功能

/*
*author: fuchao
*date: 2018-04-27
*desc: 小程序本地签名上传图片到腾讯云cos
*个人公众号: ZEROFC_DEV
**/

// 同样需要先引入COS的SDK,和配置文件
var COS = require(‘../../lib/cos-wx-sdk-v5‘);
var config = require(‘./config‘);

// 实例COS
var cos = new COS({
    getAuthorization: function (params, callback) {	//获取签名
        var authorization = COS.getAuthorization({
            SecretId: config.SecretId,
            SecretKey: config.SecretKey,
            Method: params.Method,
            Key: params.Key
        });
        callback(authorization);
    }
});

Page({
  data: {
    list: [],
  },
  simpleUpload: function() {
    // 选择文件
    wx.chooseImage({
      count: 4, // 默认9
      sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        var filePath = res.tempFilePaths[0]
        var Key = filePath.substr(filePath.lastIndexOf(‘/‘) + 1); // 这里指定上传的文件名
        var dateObj = new Date();
        var timestamp = dateObj.getTime();
        var nowDate = dateObj.toLocaleDateString();
        var formatDate = nowDate.replace(/\//g,"-");  // 格式斜杠日期
        console.log(formatDate);
        var newKey = formatDate + ‘/‘ + timestamp+Key;   // cos上定义目录
        var tempObj = {};
        tempObj.imgLocation = ‘https://‘ + config.Bucket + ‘.cos.‘ + config.Region + ‘.myqcloud.com/‘ + newKey; // 返回上传的绝对URL

        // sdk提供的COS上传函数,如果想批量上传,在这里加FOR循环即可。
        cos.postObject({
          Bucket: config.Bucket,  // 存储桶
          Region: config.Region,  // 地域
          Key: newKey,
          FilePath: filePath,     // 本地文件临时地址
          // onProgress: function (info) {   // 上传时基本信息
          //   console.log(JSON.stringify(info));
          // }
        },requestCallback(null,tempObj));
      }
    })
  },
});

// 上传图片回调函数
var requestCallback = function (err, data) {
  console.log(err || data);
  if (err && err.error) {
    wx.showModal({ title: ‘返回错误‘, content: ‘请求失败:‘ + err.error.Message + ‘;状态码:‘ + err.statusCode, showCancel: false });
  } else if (err) {
    wx.showModal({ title: ‘请求出错‘, content: ‘请求出错:‘ + err + ‘;状态码:‘ + err.statusCode, showCancel: false });
  } else {
    console.log(data);
    wx.showToast({ title: ‘请求成功‘, icon: ‘success‘, duration: 3000 });
  }
};


 

个人避坑解决方案

原因:开始上传图片到cos的项目我是用TP3.2做的,但是上传到linux且高版本的php服务器上,发现我那个生成签名的php竟然报500错误,而我本地是windows且php版本低于5.5一切都很正常。至于是什么原因,我也没时间去解决,只能把生成签名的php文件改成tp5.0的放在另一个项目中,而我就以跨域的方式去请求签名。

1.php文件修改

// 增加跨域响应头
header(‘Content-Type: application/json‘);
header(‘Allow-Control-Allow-Origin: *‘);       // 这里修改允许跨域访问的网站
header(‘Allow-Control-Allow-Headers: origin,accept,content-type‘);

// 增加前端jsonp参数
$callback = input(‘callback‘) ? input(‘callback‘) : ‘‘;

// 以回调函数返回签名到前端
echo $callback . ‘(‘ . json_encode($data) . ‘)‘;

 

2.js部分修改(主要改成跨域请求签名)

// 计算签名
var getAuthorization = function (options, callback) {
    var baseUrl = $("#cosurl").attr("urls");
    var url = baseUrl;

    $.ajax({    
        url:url,    
        dataType: ‘jsonp‘,  //类型
        jsonp: "callback",  // 参数    后台接受的是回掉函数名 
        //data:"",  
        type:‘get‘,
        success: function(result) {
            callback(null, {
                Authorization: result.Authorization,    // 跨域拿到签名
                XCosSecurityToken: result.XCosSecurityToken,
            });

        },  
        error:function(result) {  
            callback(‘获取签名出错‘);
        }
    })
};

 

个人微信公众号

技术分享图片

微信小程序/网站 上传图片到腾讯云COS

标签:php版本   load   eth   tle   tmp   color   XA   腾讯云   oda   

原文地址:https://www.cnblogs.com/zerofc/p/9038875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!