美文网首页
在ajax中利用formdata 上传图片到七牛云 然后下载

在ajax中利用formdata 上传图片到七牛云 然后下载

作者: 烫嘴豆腐 | 来源:发表于2017-02-22 18:25 被阅读687次

当表单中的数据比较多或者有文件时,利用formdata会大大提高效率,省点时间玩游戏。
举个简单的例子:(默认使用jQuery)

HTML

<form id="uploadForm">
  <p>上传人: <input type="text" name="author" value="" /></p>
  <p>上传文件: <input type="file" name="file" /></ p>
  <button type="button" onclick="upload()">提交</button>
</form>

JS

    function upload() {
        var formData = new FormData($('#uploadForm')[0]);
        console.log(formData);
        $.ajax({
            url: 'http://localhost:7070/index.php?m=Admin&c=Index&a=upload',
            type: 'POST',
            data: formData,
            dataType: 'JSON',
            async: false,
            cache: false,
            contentType: false,// 告诉jQuery不要去设置Content-Type请求头
            processData: false,// 告诉jQuery不要去处理发送的数据
            success: function (returndata) {
                console.log(returndata);
            },
            error: function (returndata) {
                console.log(returndata);
            }
        });
    }

PHP ---TP

    public function upload(){
        //获取上传者
        $author = I('author');
        //配合七牛云使用
        $setting = C('UPLOAD_SITEIMG_QINIU');
        $Upload = new \Think\Upload($setting);
        $info = $Upload->upload($_FILES); 
    }

config配置

'UPLOAD_SITEIMG_QINIU' => array ( 
                'maxSize' => 5 * 1024 * 1024,//文件大小
                'rootPath' => './',
                'saveName' => array ('uniqid', ''),
                'driver' => 'Qiniu',
                'driverConfig' => array (
                        'secretKey' => '<这里填七牛SK>', 
                        'accessKey' => '<这里填七牛AK>',
                        'domain' => 'olhv93l10.bkt.clouddn.com',
                        'bucket' => '<空间名称>', 
                )
    )

七牛云的下载

七牛云的空间分私有和公开,下面说明,参考官方文档。

私有空间

私有资源下载是通过HTTP GET的方式访问特定的 URL。私有资源URL与公开资源URL相比只是增加了两个参数e和token,分别表示过期时间和下载凭证。一个完整的私有资源 URL

http://<domain>/<key>?e=<deadline>&token=<downloadToken>

私有的空间就需要用到下载凭证生成,可以用SDK,这里我没有用。这里举个比较简单的例子。如下:

下载链接生成

TP的话 把这个放在common/common/function.php中 就能在其他模块中调用

function Qiniu_Encode($str) // URLSafeBase64Encode
{
    $find = array('+', '/');
    $replace = array('-', '_');
    return str_replace($find, $replace, base64_encode($str));
}
function Qiniu_Sign($url) {//$info里面的url
    $setting = C ( 'UPLOAD_SITEIMG_QINIU' );
    $duetime = time()+ 86400;//下载凭证有效时间
    $DownloadUrl = $url . '?e=' . $duetime;
    $Sign = hash_hmac ( 'sha1', $DownloadUrl, $setting ["driverConfig"] ["secretKey"], true );
    $EncodedSign = Qiniu_Encode ( $Sign );
    $Token = $setting ["driverConfig"] ["accessKey"] . ':' . $EncodedSign;
    $RealDownloadUrl = $DownloadUrl . '&token=' . $Token;
    return $RealDownloadUrl;//$RealDownloadUrl为下载对应私有资源的可用URL
}

TP的控制器部分代码

就是我们之前写的PHP代码 加点东西

    public function upload(){
        //获取上传者
        $author = I('author');
        //配合七牛云使用
        $setting = C('UPLOAD_SITEIMG_QINIU');
        $Upload = new \Think\Upload($setting);
        $info = $Upload->upload($_FILES); 
        //共有空间下载链接
        $url = $info['file']['url'];
        if($info){
            //私有空间下载链接 
            $link['url'] = Qiniu_Sign($url);
            return show(0,'上传成功',$link);//如果想用公开就把$link改成$url
        }else{
            return show(0,'上传失败');
        }
    }

show是我自己写的一个方法代码如下

function show($status,$message,$data=array()){
    $result = array(
    'status' => $status,
    'message' => $message,
    'data' => $data
    );
    exit(json_encode($result));
}

接下来只要前端对数据进行简单处理就行了,附上ajax请求成功代码片段

            success: function (result) {
                // console.log(returndata);
                var res = eval("("+result+")");
                //私有空间下载
                $('#header-img')[0].src = res.data.url;//把图片src改成七牛云的地址 就可以看到的时候就成功了
                //共有链接下载地址
                //$('#header-img')[0].src = res.data;
            }

公开空间

公开资源下载通过HTTP GET的方式访问资源 URL 即可。资源 URL 的构成如下:

http://<domain>/<key>

超级简单 首先先修改上文提到config.php文件中 代码如下

'domain' => 'olhv93l10.bkt.clouddn.com',//把这个改成公开空间

其他的上面也写到了 嘿嘿

更加详细的TP七牛云使用可以访问官网论坛 http://www.thinkphp.cn/code/643.html
关于七牛云的下载资源的文档 https://developer.qiniu.com/kodo/manual/download-process

相关文章

网友评论

      本文标题:在ajax中利用formdata 上传图片到七牛云 然后下载

      本文链接:https://www.haomeiwen.com/subject/ksmmwttx.html