七牛云上传资源和拉取

一、七牛云存储介绍

七牛云存储，是非常流行的用户存储图片 视频 音频 等文件的存储方式，可以大大的降低用户请求对我们自己服务器的查询压力， 能有效的提高网页的打开速度，使用户获取更好的使用体验。

二、文档说明

1.注册账号

2.绑定邮箱

3.实名认证

4.创建存储空间，并记录自己的存储空间姓名，和域名

5.查看自己的密钥，并记录

三、上传七牛云的步骤

1. 前端请求后端，获取上传七牛云的token

2. 将后端返回的token放入提交的表单中

3. 设置el-upload中的上传地址，即action（七牛云对应的服务器地址） action="http(s)://up-z2.qiniup.com"

4. 选择图片，进行自动上传-->：auto-upload='true'

5. 上传成功的处理，拼接可访问图片的路径，==自己的域名(30天有效)==+ res.key

四、代码实现

 

1.后端代码实现(token的获取)

from qiniu import Auth

# 需要填写你的 Access Key 和 Secret Key
access_key = 'hmv--oUg0_Ubsrq**********VRfYkpmmSa1b_bv'
secret_key = '9tW8bwz3VQonIUb********pp8rayHZTv_oZGIrh'

# 构建鉴权对象
def qn_token():
    q = Auth(access_key, secret_key)
    # 要上传的空间，你的存储空间
    bucket_name = 'laufing'
    # 生成上传 Token
    token = q.upload_token(bucket_name)

    return token

# 生成上传七牛云的token
class QiNiuTokenView(APIView):
    """
    获取七牛云上传token
    """
    def get(self, request):
        token = qn_token()
        return Response({'msg': 'OK', 'code': 200, 'qn_token': token})

2.前端代码实现，图片的拉取

(1)配置action，文档里面有，注意上传的地址要是自己的服务区的地址

(2)获取token，直接向后端发送请求就可以获取到自己七牛云的token

(3)成功就是获取到的响应的key加上自己的域名

//上传的配置， 注意上传的地址要是自己的服务区的地址
<el-upload
  action="http://up-z2.qiniu.com/"
  :on-success="uploadSuccess"
  :data="upload_data"
  :before-upload="beforeUpload"
  :on-error="uploadError"
  :auto-upload="true"
>


//上传之前， 获取七牛token
beforeUpload(file){
  console.log("上传之前:", file)
  // 获取上传七牛云的token
  this.get_token()
  
},

// 获取七牛云上传的token
get_token() {
  this.axios
    .get(cons.apis + "/goods/get_token/", {
      headers: {
        Authorization: "JWT " + token,
      },
      responseType: "json",
    })
    .then((dat) => {
      console.log("获取七牛云的token:", dat);
      this.upload_data.token = dat.data.token;
    })
    .catch((err) => {
      console.log(err.response);
    });
},

// 上传成功触发的方法
uploadSuccess(res, files) {
  console.log("上传图片成功的响应:", res)
  // 上传的文件对象
  console.log("上传的文件：", files)
  // 拼接图片地址
  this.PicturesForm.image = "http://ra6rclc1p.hn-bkt.clouddn.com/" + res.data.key

},

// 上传图片失败的函数
uploadError(err) {
  console.log("上传图片失败：", err);
},