手把手教你用七牛云存储图片

环境说明：Django + Vue + Element-ui

在开发项目的时候，经常会用到上传图片的功能，如果把图片全都存放在项目路径下，会导致项目越来越臃肿，因此可以考虑把图片上传交给第三方处理，今天我们采用七牛云进行图片存储，展示。

七牛云介绍

官网：https://www.qiniu.com/

七牛云（隶属于上海七牛信息技术有限公司）是国内领先的以视觉智能和数据智能为核心的企业级云计算服务商，同时也是国内知名智能视频云服务商，累计为 70 多万家企业提供服务，覆盖了国内80%网民。围绕富媒体场景推出了对象存储、融合 CDN 加速、容器云、大数据平台、深度学习平台等产品、并提供一站式智能视频云解决方案。为各行业及应用提供可持续发展的智能视频云生态，帮助企业快速上云，创造更广阔的商业价值。

通过七牛云官网介绍我们可以知道其提供了多种服务，我们主要使用的是七牛云提供的对象存储服务来存储图片。

七牛云准备工作

进入七牛云官网,完成注册登录，紧接着进行邮箱验证、再进行个人认证（微信扫码认证），个人认证完成之后进入主页，新建一个空间，获取秘钥(将秘钥保存下来)。

获取秘钥

获取地址

进入创建好的空间，复制官方给的地址。

图片上传

Django中配置

安装qiniuyun

python中安装七牛云依赖包： pip install qiniu

封装方法

# 写一个存放工具类的文件，写入以下内容
from qiniu import Authaccess_key = 'your ak'
secret_key = 'your sk'def qn_token():"""构建鉴权对象:return:token """q = Auth(access_key, secret_key)# 要上传的空间bucket_name = 'archpan'# 生成上传 Tokentoken = q.upload_token(bucket_name)return token

使用方法

from utils.comm import qn_tokenclass QniuImageViewTest(APIView):"""获取token:return:token """def get(self, request):token = qn_token()return Response({'code': 200, 'token': token})

element-ui上传展示图片

<template><el-form><el-form-item label="上传封面"><el-uploadaction="http://up-z1.qiniu.com/":on-success="uploadSuccess":limit="1"list-type="picture":data="postData"accept=".png, .jpg"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></el-form-item></el-form>
</template><script>export default {data() {return {imageUrl: "",postData: {// 后端返回的token对象token: ''},EncodedEntryURI: ""}},methods: {// 上传成功返回图片地址uploadSuccess(res) {this.EncodedEntryURI = res.key;this.imageUrl = 'http://你的地址/' + res.keyconsole.log(this.imageUrl)},getToken() {this.axios.get('sadmin/test/').then(res => {this.postData.token = res.data.tokenconsole.log(res.data)})}},mounted() {this.getToken()}}
</script>

效果展示

总结

七牛云为我们提供了一个空间，我们只需要上传资源就Ok了，数据库存储的是资源的路径，减少服务器的压力。感谢观看！！！

手把手教你用七牛云存储图片相关推荐

七牛云存储,图片储存
七牛云存储,图片储存概述七牛云对象存储服务提供高可靠.强安全.低成本.可扩展的非结构化数据的存储服务.它提供简单的 Web 服务接口,可以通过七牛开发者平台或客户端存储和检索任意数量的数据,支持 ...
php七牛云储存图片,wordpress使用七牛云存储图片 | 厘米天空
说到建站,多少会用到图片存储.免费的网络相册有很多,但是做站时能用到的必须得稳定快速和支持外链,本站一直在使用的一个存储就是七牛云.注册认证通过标准用户就可以得到10G的免费存储空间和免费10G的月流 ...
php+laravel框架七牛云存储+图片审核+文字审核
图片审核+文字审核使用的是百度智能云-登录,且只需修改apikey和sercekey即可使用 1. composer 下载 composer require zgldh/qiniu-laravel- ...
Spring Boot 使用七牛云存储图片并且使用自定义域名访问
文章目录前言一.环境准备 1. 账号准备注册七牛云账号并实名创建对象存储空间获取密钥 2. 创建spring boot 项目 pom.xml application.yml 二.上传本地文件 ...
ueditor与七牛云存储结合
2019独角兽企业重金招聘Python工程师标准>>> 摘要: ueditor与七牛云存储结合,主要是表单api. ueditor上传图片到七牛云存储 ueditor结合七牛传图片 ...
苹果cms怎么同步图片到新浪或是七牛云存储
做影视站视频资源多了以后图片是个很头疼的事,不但占用空间还影响网站响应速度,其实苹果cms官方给出的不错方案就是把图片同步到第三方云存储例如:新浪图床,七牛云存储,又拍云存储等. 具体操作步骤如下: ...
使用七牛云存储在网站中进行图片外链
在CSDN中写博客,如果想在文章中插入一张图片,其实是非常简单的,只要从你本机进行图片选择,然后选择上传,图片就会上传到CSDN的服务器,到时候在文章显示的时候就会读取该图片.但是如果是在自己的搭建的 ...
七牛云删除图片接口_图片基本处理（imageView2）
imageView2 提供简单快捷的图片格式转换.缩略.剪裁功能.只需要填写几个参数,即可对图片进行缩略操作,生成各种缩略图.imageView2接口可支持处理的原图片格式有psd.jpeg.png. ...
JavaWeb结合七牛云存储搭建个人相册服务
JavaWeb结合七牛云存储搭建个人相册服务一.引言 1. 课程概述相信很多人都知道网站一般会有很多图片,对于小型网站来说,图片放在网站服务器上不算什么,但当图片数量很大时,会造成服务器很臃肿,相 ...