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

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

七牛云介绍

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

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

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

七牛云准备工作

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

获取秘钥

在这里插入图片描述

获取地址

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

在这里插入图片描述

图片上传

Django中配置
安装qiniuyun

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

封装方法
# 写一个存放工具类的文件,写入以下内容
from qiniu import Auth

access_key = 'your ak'
secret_key = 'your sk'

def qn_token():
    """
    构建鉴权对象
    :return:token 
    """
    q = Auth(access_key, secret_key)
    # 要上传的空间
    bucket_name = 'archpan'
    # 生成上传 Token
    token = q.upload_token(bucket_name)
    return token
使用方法
from utils.comm import qn_token

class 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-upload
        action="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.key
        console.log(this.imageUrl)
      },
      getToken() {
        this.axios.get('sadmin/test/').then(res => {
          this.postData.token = res.data.token
          console.log(res.data)
        })
      }
    },
    mounted() {
      this.getToken()
    }
  }
</script>

效果展示

在这里插入图片描述

总结

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐