最近要做一个上传文件到七牛的功能，没看官方文档之前认为蛮简单的，看完之后就蒙比了。太乱了吧，也许是搞的太晚了，没心思认真看文档。废话不多说了

流程：前端先get后端的uptoken，选择文件后上传到七牛，七牛上传成功重定向到设置的back页面，end

1.前端代码（这里参考了[http://www.tuicool.com/articles/MZzE3eU] 和 [https://smohan.im/blog/ygbey7]）

//html   
 <el-form-item label="上传附件">    
            <el-upload
              class="upload-demo"
                action="//up.qbox.me/"
                type="drag"
                 :accept="accepts"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :data="form"    //uptoken 和key
              :on-remove="handleRemove"
              >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png/zip文件，且不超过500kb</div>
            </el-upload>
      </el-form-item>
//js
export default {
  data () {
    return {
      loading: false,
      bucketHost: 'https://***********/',   // 上传图片的外链域名,七牛设置的
      form: {    //存放获取到uptoken 和 key
        token: '',   //需要经过编译，并不是直接复制七牛账号里面的token
        key: ''       //这个key也不是七牛账号的key，key可以重命名上传的文件名，其他作用不太记得了
      },
      accepts: 'image/jpeg, image/jpg, image/png, image/gif, application/zip, application/x-zip-compressed',
        //运行上传图片和zip文件
    }
  },
  mounted () {
    this.getUptoken()//先从服务器请求uptoken
  },
  methods: {
    getUptoken () {
      let _this = this
      this.$http.jsonp(this.rootUrl2 + '/uptoken.php', { emulateJSON: true })
      .then(function (response) {
        _this.form.token = response.body.data
      })
    },
    beforeUpload (file) {  //每次上传文件之前设置key
      let suffix = file.name
      let key = encodeURI(`${suffix}`)
      this.form.key = key
      return this.form
    }

2.php代码，这个主要3个php文件还一个src文件夹是官方php SDK里面的复制过来就可以

uptoken.php
这里要注意了：ReturnUrl 和 ReturnBody首字母一定要大写，否则重定向不成功

<?php
require_once  'autoload.php';
header('Access-Control-Allow-Origin:*');
use Qiniu\Auth;
$bucket = 'gond*******';                       //你要上传七牛的空间名
$accessKey = '***********ak';
$secretKey = '************sk';
$auth = new Auth($accessKey, $secretKey);
//$upToken = $auth->uploadToken($bucket);
$policy = array(
//图片上次成功后七牛重定向的链接，不指定上传成功会报303的错
    'ReturnUrl' => 'https://gongyicloud.com.cn/fileinfo.php',    
    'ReturnBody' => '{"fname": $(fname)}',
);
$upToken = $auth->uploadToken($bucket, null, 3600, $policy);
$array = array('code'=>'0','data' =>$upToken);
echo $_GET['callback'].'('.json_encode($array).')';

autoload.php

<?php 
function classLoader($class)
{
    $path = str_replace('\\', DIRECTORY_SEPARATOR, $class);
    $file = __DIR__ . '/src/' . $path . '.php';

    if (file_exists($file)) {
        require_once $file;
    }
}
spl_autoload_register('classLoader');

require_once  __DIR__ . '/src/Qiniu/functions.php';

fileinfo.php

<?php 
header('Access-Control-Allow-Origin:*');
$ret = base64_decode($_GET['upload_ret']);
$cbody = json_decode($ret, true);
$dn = 'https://gongyiclo*********d.com/';    //七牛你自己设置的外链默认域名
error_log(print_r($cbody, true));
$url = $dn . $cbody['fname'];
error_log($url);
$stat_ = file_get_contents($url . '?stat');
$stat = json_decode($stat_, true);
$mtype = $stat['mimeType']; 
$isImage = substr($mtype, 0, 6) == 'image/';
$array = array('code'=>'0','data' =>$url);
echo $_GET['callback'].'('.json_encode($array).')';
?>