七牛云 element-ui 上传图片

最新推荐文章于 2023-05-25 17:53:33 发布

Only You~~~

最新推荐文章于 2023-05-25 17:53:33 发布

阅读量616

点赞数 4

分类专栏： django 文章标签： vue.js python pycharm

本文链接：https://blog.csdn.net/weixin_56052356/article/details/119985980

版权

django 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

element-ui 官网：

https://element.eleme.cn/#/zh-CN

七牛云官网：

https://www.qiniu.com/

1.七牛云注册登录之后然后实名认证点击对象存储

在这里插入图片描述

2.进入对象存储后进入空间管理

在这里插入图片描述

3.新建空间在这里拿到cdn测试域名

在这里插入图片描述

在PyCharm中下载qiniu这个包

pip install qiniu

在utils文件夹中创建一个comm文件

from qiniu import Auth

# 需要填写你的 Access Key 和 Secret Key  要用自己的
access_key = 'Access Key'
secret_key = 'Secret Key'

# 构建鉴权对象
def qn_token():
    q = Auth(access_key, secret_key)
    # 要上传的空间
    bucket_name = 'h2102a'
    # 生成上传 Token
    token = q.upload_token(bucket_name)
    return token

在views文件中写入接口

# 导入封装好的token
from utils.comm import qn_token

#七牛云获取token接口
class GetQnToken(APIView):
    def get(self,request):
        token = qn_token()
        return Response({'code':200,'token':token})

配置路由

from django.urls import path
from . import views 


urlpatterns = [
    path('getqiniu/',views.GetQnToken.as_view())
]

VUE

vue页面

<template>
  <el-form>
    <el-form-item label="上传封面">
      <!-- el-upload上传的组件 action地址 success传完之后做的事 limit传几条 data必带的参数 必须有一个token accept格式-->
      <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 = "cdn测试域名" + res.key;
      console.log(this.imageUrl)
    },

    // 上传图片的接口
    getToken(){
        this.axios.get('sadmin/getqiniu/').then(res=>{
            console.log(res.data)
            this.postData.token = res.data.token
        })
    }

  },
  created() {
      this.getToken()
  },
};
</script>