环境说明：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了，数据库存储的是资源的路径，减少服务器的压力。感谢观看！！！