七牛云上传文件---vue

最新推荐文章于 2024-12-29 15:51:59 发布

原创

最新推荐文章于 2024-12-29 15:51:59 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#python

本文介绍了如何在Vue项目中实现七牛云文件上传的过程，包括后端获取七牛云token的步骤和前端调用接口进行文件上传的操作。

官方接口文档：
python SDK：https://developer.qiniu.com/kodo/sdk/1242/python
JavaScript SDK： https://developer.qiniu.com/kodo/sdk/1239/java

1.安装

pip install qiniu

npm install qiniu-js

2.准备工作

存储空间及密钥

3.后端获取七牛云token

utils/MyBaseView
def qiniu_token():
#需要填写你的 Access Key 和 Secret Key
    access_key = QINIU_ID
    secret_key = QINIU_SECRET
    #构建鉴权对象
    q = Auth(access_key, secret_key)
    # 要上传的空间
    bucket_name = 'quanliangxu1'
    # 生成上传 Token，可以指定过期时间等
    token = q.upload_token(bucket_name, expires=3600)
    return token

views
from rest_framework.views import APIView
from rest_framework.response import Response
from utils.MyBaseView import qiniu_token
class QiNiuToken(APIView):

    # permission_classes = [IsAuthenticated]

    def get(self, request):
        token = qiniu_token()
        print(token)
        res_data = {
   
   
            "code": 200,
            "msg": "获取token成功",
            "data": {
   
   
                "uptoken": token
            }
        }
        return Response(res_data)

urls
from django.urls import path, include
from oauthapp import views

router = DefaultRouter()

urlpatterns = [
    path('qntoken/', views.QiNiuToken.as_view()), # 获取七牛云token
]

4.前端调用接口输入所输数据进行上传

<template>

   <div>
    <h1>xxx课程</h1>
    <div style="margin: 20px;">
      <label>节标题：</label>
      <input type="text" name

最低0.47元/天解锁文章