七牛云图片上传

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

在我们写项目的时候时常会用到图片上传，这个时候我就可以使用七牛云来进行图片的上传

提示：以下是本篇文章正文内容，下面案例可供参考

二、使用步骤

1.创建文件

代码如下（示例）：

在主项目下创建文件夹utils文件 , 然后在里面创建qiniu.py

2.获取七牛云token地址

代码如下（示例）：

from qiniu import Auth, put_file, etag
import qiniu.config
#需要填写你的 Access Key 和 Secret Key
def aaa():
	#需要填写你的 Access Key 和 Secret Key
    access_key = '9tZxBlFvp2Ea6CMYYXWtkEIXybRvXXkVWN8FDRMi'			#
    secret_key = 'VzDflhDw4oSkOnsGr4TaYmUkpPzZTHBoknWaHHav'
    #构建鉴权对象
    q = Auth(access_key, secret_key)
    #要上传的空间
    bucket_name = '620371'
    #生成上传 Token，可以指定过期时间等
    token = q.upload_token(bucket_name,expires=3600*24)
    #返回token
    return token

3.写视图获取token

代码如下（示例）：

from utils.qiniu import *
# 获取图片token
class TokenView(APIView):
    def get(self,request):
        token = token_name()
        return Response({
            'code':200,
            'msg':'token发送成功',
            'token':token
        })

4.前端接受token

代码如下（示例）：

        get_token() {
            get('token/')
            .then((dat) => {
            console.log("token>>>",dat.data);
            this.upload_data.token = dat.data.token;
            })
            .catch((err) => {
            console.log(err.response);
            });
        },

5.上传图片

代码如下（示例）：

          <el-upload
            action="https://upload-cn-east-2.qiniup.com"		//七牛云的上传地址
            :auto-upload="true"
            :on-success="uploadSuccess"
            :data="upload_data"
            :on-error="uploadError">
            <el-button size="small" type="primary" >点击选择图片</el-button>
          </el-upload>

6.生成图片地址

代码如下（示例）：

        // 点击上传，上传成功触发的方法
        uploadSuccess(res, files,fiels_list) {
        // res.key 获取上传的图片在七牛云存放的地址
        // 拼接图片地址
            this.imgUrl = "http://rhf1gdeiq.bkt.clouddn.com/" + res.key;

            console.log("imgurl>>>", this.imgUrl);
            },

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了七牛云的使用