前端上传图片到七牛云

先说一下大致思路，前端到后台获取七牛上传token，前端上传图片到七牛，成功后将图片地址返回给后台。

废话不说，直接贴代码（极简版）

    





    

提交

最简单粗暴的表单上传，当然token还需要后台获取。下面看一下项目中的运用

php获取token:

    //获取后台上传token
    public function getToken()
    {
         //上传策略
        $policyFields =[
            'mimeLimit'=>'image/jpeg;image/png',
        ];
        $expires = 3600;

        $accessKey = Config::get('qiniu.accessKey');//获取七牛AK
        $secretKey = Config::get('qiniu.secretKey');//获取七牛SK
        $auth = new Auth($accessKey, $secretKey);
        $bucket = Config::get('qiniu.appimgbucket');//设置存储空间
        $token = $auth->uploadToken($bucket);
        //$token = $auth->uploadToken($bucket,null,$expires,$policyFields);//若需要限制上传文件类型，则在生成token时添加上传策略即可
        echo json_encode(getReturnData(200,'获取token成功',$token));
    }

注：需先引入七牛php SDK

如在thinkphp中进行引入 ：

vendor('php_sdk.autoload');
use Qiniu\Auth as Auth;

接下来看下前端的html 

            

                

                

                    
* 选择图片：
                    

                
       
                

                
 确定
                
                
            

后端的js

//第一步 获取token
function saveimg(addurl,tokenurl) {
    $.post(tokenurl,{d:'d'},function(result){
          var token=result.data;
        saveimgtoqiniu(addurl,token);
        },'json');

}
//第二步 将图片传到七牛
function saveimgtoqiniu(addurl,token) {
    var formData = new FormData();
    formData.append("file",  $('#imgaddr')[0].files[0]);
    formData.append("token", token);
    $.ajax(
        {
            type: 'POST',
            url: 'http://up-z0.qiniup.com',
            contentType: false,
            data: formData,
            processData: false,
            async :false,//设置格式为同步非异步 不然可能会报错无法存储到临时变量/对象
            dataType:'json',
            success: function (r) {
                console.log(r);
                var imgurl='你的图片地址'+r.key;//获取到key值后拼接图片地址
                saveimgtoserver(addurl,imgurl);//第三步：将图片地址传到后台服务器即可
            },
            error: function (r) {
                console.log(r);
            }
        });
}