上传图片到七牛云

1.首先我们需要先创建七牛云账号，并完成认证：七牛云 | 一站式场景化智能视频云

 2. 创建自己的存储空间：

       第一步：点击对象存储kodo

 2.进入后点击空间管理

 3.创建自己的存储空间，需要注意访问控制要选择公开。

4.进入个人中心->密钥管理，获取个人的AK和SK，可以先复制到文本上，后面要用。

5.创建好空间后，就可以编写前后端代码。后端需要先获取token并返回给前端,python需要先安装七牛云，可以参考官方文档安装：Python SDK_SDK 下载_对象存储 - 七牛开发者中心

后端上传图片，生成token：

​# 导入七牛云
from qiniu import Auth
#需要填写你的 Access Key 和 Secret Key
#这里的access_key:就是刚才复制的AK
access_key = 'tZZ089D_Kl6B-APpiIB-orZ-7JEr_RRJB9UlkWhx'
#这里的secret_key:就是刚才复制的SK
secret_key = '-WkxSEURRgavdD9ZXV67XLvAsndjDFqBSKP-Cjwu'
#注意：AK和SK不要弄混了


class QiNiuFiles(APIView):
    def get(self,request):
        # 构建鉴权对象
        q = Auth(access_key, secret_key)
        bucket_name = "xiu-a"
        # 生成上传token,可以指定过期时间
        token = q.upload_token(bucket_name)
        return Response({'token':token})

​

 前端向后端请求，获取生成的token

​
 // 获取token
    get_token() {
      this.axios
        .get("http://127.0.0.1:8000/images/get_token/")
        .then((dat) => {
           // 打印获取到的token
          console.log("token>>>",dat.data);
            //接收token里上传成功后的，文件名
          this.upload_data.token = dat.data.token;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },

​

选择图片，进行自动上传-->：auto-upload='true'

​
​
​
<el-form-item label="商品图片" prop="logo">
          <el-upload
            <!-- 必选参数，上传的地址 -->
            action="https://upload-cn-east-2.qiniup.com"
            auto-upload='true'
            <!-- 文件上传成功时的钩子 -->
            :on-success="uploadSuccess"
            <!-- upload_data就是我们刚才获取token里面的上传后的文件名, -->
            :data="upload_data"
            <!-- 文件上传失败时的钩子 -->
            :on-error="uploadError"
          >
            <el-button size="small" type="primary">点击选择图片</el-button>
          </el-upload>
        </el-form-item>

​

​

​

6.设置el-upload中的上传地址，即action（七牛云对应的服务器地址） 可以通过：存储区域_产品简介_对象存储 - 七牛开发者中心

   进行查找

 上传成功的处理，拼接可访问图片的路径,得到路径后就可可以保存到数据库，等待调用，或者直接访问。

// 点击上传，上传成功触发的方法
    uploadSuccess(res) {
      // res.key 获取上传的图片在七牛云存放的地址
      // 拼接图片地址
      this.imgUrl = this.baseUrl + res.key;
      console.log("imgurl>>>", this.imgUrl);
    },
    uploadError(err) {
      console.log(err);
    },

以上是小编学习到的上传流程，如有错误请您指出，万分感谢！