前后端分离使用七牛云存储

2018-12-04

本篇记录一下如何在前后端分离项目中如何使用七牛云token,前端使用React+Antd,后端采用Flask

根据七牛云的文档,我们需要在后端生成一个上传文件的token,然后再由前端携带token进行相关配置。

使用前必看

python SDK

安装

pipenv install qiniu

生成流程

from qiniu import Auth

@api.route('/qiniu', methods=['GET'])
@auth.login_required
def get_qiniu_token():
    """ 获取七牛云token """
    access_key = current_app.config['ACCESS_KEY']
    secret_key = current_app.config['SECRET_KEY']
    # 构建鉴权对象
    q = Auth(access_key, secret_key)
    # 要上传的空间
    bucket_name = current_app.config['BUCKET_NAME']
    # 生成上传token,可指定过期时间
    token = q.upload_token(bucket_name, key=None)
    t = {
        "token": token
    }
    return jsonify(t)

Access Key 和 Secret Key 在七牛云开发者后台查看,

前端在Antd的Form中使用

使用思路是,我们给Upload组件配置相关属性action指向上传的七牛云server地址,data属性配置携带上传token的对象。

const QINIU_SERVER = "http://up.qiniu.com";
const qndata = { token: qiniutoken };

<FormItem {...formItemLayout} label={<FormattedMessage id="form.cover.label" />}>
   {getFieldDecorator("cover", {
   valuePropName: "fileList",
   getValueFromEvent: this.normFile,
   ules: [
     {
       required: true,
       message: formatMessage({ id: "validation.cover.required" })
      }
    ]
   })(
      <Upload name="file" action={QINIU_SERVER} listType="picture" data={qndata}>
         <Button>
           <Icon type="upload" />{<FormattedMessage id="Click to upload" />}
         </Button>
       </Upload>
    )}
</FormItem>

其中token请求我们的后端api地址获得。

其中我曾遇到一个问题

"error":"key doesn't match with scope"

这个问题是说我们上传token中指定的key与上传方法中的不一致导致的。

有两种解决办法:

第一种是生成token时需要提前写入key值,前端上传时需要填入key和token值。

第二种是在后端生成token时,将key=None如本文所示。