七牛云上传资源和拉取

一、七牛云存储介绍

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

二、文档说明

1.注册账号

2.绑定邮箱

3.实名认证

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

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

三、上传七牛云的步骤

前端请求后端，获取上传七牛云的token
将后端返回的token放入提交的表单中
设置el-upload中的上传地址，即action（七牛云对应的服务器地址） action="http(s)://up-z2.qiniup.com"
选择图片，进行自动上传-->：auto-upload='true'
上传成功的处理，拼接可访问图片的路径，==自己的域名(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'# 生成上传 Tokentoken = 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-uploadaction="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)// 获取上传七牛云的tokenthis.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);
},

七牛云上传资源和拉取相关推荐

PHP七牛云上传大视频文件异步存为m3u8格式（包括回调过程）
问题引入视频的第一帧加载缓慢. 简介 HTTP Live Streaming,缩写为HLS,是由苹果公司提出基于HTTP的流媒体网络传输协议.它的工作原理是把整个流分成一个个小的基于HTTP的文件来 ...
七牛云上传文件之表单上传文件
本人愚钝,七牛云上传文件的开发说明文档看了好久才搞懂,才能完成一个实例跑起来.现在做一下总结. 1.注册七牛,新建一个bucket,并获得ak,sk这个不用说了.不涉及到程序编码,重点讲一下编码的流程 ...
uni-app 七牛云上传文件
关注我的哔哩哔哩哦 https://space.bilibili.com/309103931 哔哩哔哩文章链接https://www.bilibili.com/read/cv5072498 七牛云上传 ...
七牛云上传截图后的base64位遇到的问题总结
最近公司内部项目遇到上传base64位图片到七牛云,并且自定义key存储,在解决过程遇到很多问题,但是最终经过请教,都得到结果,故在这里总结一下... 官方文档 1,布局代码如下: <div c ...
dockerhub 拉取地址_使用docker,进行dockerhub仓库上传镜像，拉取镜像。
Docker Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布 ...
Git和Github本地上传下载及拉取他人代码
Git和Github本地上传下载及拉取他人代码闻道有先后,术业有专攻(自己瞎搞一两个小时,没有后端老王15分钟来的透彻) 一:通过Git把Github上的代码下载到本地 !首先是什么!!下载Git, ...
uniapp使用七牛云上传
分享一下,新写的uniapp使用七牛云上传,网上好多坑,可气死我了 uni.chooseImage({count: 1, //默认9sizeType: ["original", & ...
Dcat Admin + 七牛云上传
提示:特别简单,敬请期待文章目录前言一.使用步骤 1.引入composer 2.配置文件 3.实操前言例如:随着laravel的不断发展,doct-admin也随之而来,接下来就是七牛云上传 ...
七牛云上传头像出现 401 错误和跨域问题 | 大别山码将
使用七牛云上传头像时出现以下问题报错内容: 询问被告知上传路径不对,华南,华东地域是不一样的,于是我想到之前图片上传成功是因为我在华南,七牛云区域也设置的华南,现在我在华东了,那应该是设置成华东就能 ...