七牛云上传图片

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

以上操作完成后需要创建一个空间

这里记得选择公开的 不然的话上传图片可以 但是获取不到空间中的图片                 起一个空间名    存储区域随意

 

创建成功后该空间会有30天的外联域名免费使用,  足够开发使用了 这里我们要将空间名  和  外联域名  复制下来   -------接下来要使用

 打开个人中心的密钥管理    复制下来一组密钥  一个AK   和  一个  SK 是一组     状态为使用中

生成七牛云的 token  的方法(后端使用的Flask框架)

这个方法写到蓝图  ---配置一个路由    这里就不写了

from qiniu import Auth

AK = '这里是上面复制的AK密钥'
SK = '这里是上面复制的SK密钥'



def qiniu_token():
    q = Auth(AK, SK)
    token = q.upload_token("这里是空间名")
    return token

前端定义一个钩子方法   请求上面这个接口   得到七牛云 的token

上传图片需要一个对应区域的上传至服务器的地址  点击查看    使用源站上传的地址即可

 async afterRead(files) {
      const { file } = files;
      const fd = new FormData();
      fd.append("file", file);
      fd.append("token", this.qiniu_token);
      console.log("上传图片的信息是>>>>>", fd);

      const { data: res } = await this.$axios.post(
        // 这个就是源站上传的地址可以根据自己的区域找对应的上传地址,
        // 数据为 文件的数据流 和 七牛云的token
        "http://up-z2.qiniup.com",  
        fd
      );
      // 上传图片的响应res中会有一个key
      console.log("图片上传的结果", res.key);

      // 将外联域名与 这个key  拼接   可以使用拼接后的地址访问上传的图片
      var base_url = "http://rcslp77cz.hn-bkt.clouddn.com/" + res.key;

      // 将地址保存
      this.profile_photo = base_url;
}

只需要将上面生成的地址保存到数据库中即可

这就不用在写了吧    哈哈