上传七牛云的方法

原创已于 2022-07-07 11:55:24 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #django #python #json

于 2022-07-07 11:48:49 首次发布

博客介绍了七牛云的使用，包括注册用户、保存密钥、新建空间、记录空间名、获取域名等操作，还提及了后端逻辑和前端逻辑，最后指出上传成功后需保存七牛云图片地址。

该文章已生成可运行项目，

七牛云的地址：https://portal.qiniu.com/home

注册一个用户
保存密钥
在这里插入图片描述

新建空间默认为华南必须认证身份才行
把空间名记录下来

点击开发者中心

点击对象存储

保存地址

获取域名

后端逻辑


from qiniu import Auth

# 七牛云的密钥
ak = 'qIpsogKsnioK63SvhCDMpIxE9-GHbZknWdOGOW4_'
sk = 'Gmg0YLb5QKzQYxAH2DspibMEsVloRmjfxjHU43L5'

def gen_token():
    q = Auth(ak, sk)

    # 生成七牛的token
    token = q.upload_token(bucket='p6123', expires=3600)

    return token


# 七牛token的视图
class QiniuTokenView(APIView):
    def get(self, request):
        # 成功七牛token
        token = gen_token()
        return Response({
            'code': 200,
            'msg': '七牛云token生成成功',
            'token': token
        })

前端逻辑

<el-form-item label="商品图片" prop="image">
	<!--  :action="保存的地址,把（s）取掉" -->
  <el-upload
    :action="'http://up-z2.qiniup.com'"
    :on-success="uploadSuccess"
    :data="upload_data"
    :on-error="uploadError"
  >
    <el-button size="small" type="primary">点击选择图片</el-button>
  </el-upload>
</el-form-item>

mounted() {
	this.axios
        .get("v1/goods/qiniuToken/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          // console.log("token>>>",dat.data);
          this.upload_data.token = dat.data.token;
        })
        .catch((err) => {
          console.log(err.response);
        });
  },

上传成功后保存七牛云图片地址

uploadSuccess(res, files) {
      console.log("上传的图片响应:", res);
      this.PicturesForm.image = 'http://' + '自己的域名' + '/' + res.key

      console.log("'上传成功',>>>", this.PicturesForm.image);
    },