使用element-ui的upload组件上传图片文件到七牛云的填坑记录

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

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

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

//html   
     
            
              点击上传
              
只能上传jpg/png/zip文件，且不超过500kb
            
      
//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首字母一定要大写，否则重定向不成功

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

fileinfo.php

'0','data' =>$url);
echo $_GET['callback'].'('.json_encode($array).')';
?>