django + Vue + 七牛云上传图片

Django+Vue+七牛云图片上传实践

最新推荐文章于 2024-07-02 11:14:20 发布

原创最新推荐文章于 2024-07-02 11:14:20 发布 · 485 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#python #vue #django

django 同时被 2 个专栏收录

10 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍如何使用Django后端框架结合Vue前端框架，利用七牛云存储服务实现图片上传功能。包括Python端获取七牛云上传token，Vue端实现图片选择上传并显示预览。

django + Vue + 七牛云上传图片

申请七牛云账号、创建七牛云空间这是省略

1、使用python获取上传使用的token值

安装七牛云
```
pip install qiniu==7.2.6
```

获取token,这里是使用的工用方法，在myutils下创建qiniu_api.py文件

from qiniu import Auth


def qiniu_token():
    # 定义密钥
    qn = Auth('qwqwqwqJengadfsadvWtXvDC8Gx5BQhCN0kIBrE', 'FYaPqqwqwqwqsd4-c5Ad-hRf6myQ_zuq1cdfsdywD2D4P')
    # 指定上传空间, 返回token值
    token = qn.upload_token('bucket0sfas325')
    return token

在views.py里使用qiniu_token

from django.views import View
from django.http import JsonResponse
from myutils.qiniu_api import qiniu_token


class UpTokenView(View):

    def get(self, request):
        """
        七牛云token接口
        """
        return JsonResponse({'token': qiniu_token()})

定义url

from django.urls import path
from . import views

urlpatterns = [
    path('uptoken/', views.UpTokenView.as_view()),  # 获取七牛云上传凭证
]

2、在vue里面写入的内容

<template>
    <div>
        <p style="text-align: center;">七牛云上传：<input type="file" @change="upload_qiniu"></p>
        <p style="text-align: center;"><img :src="img_url" alt="" style="width: 200px; height: 200px; border-radius:50%;"></p>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            img_url: '',
            // 七牛去上传凭证
            uptoken: ''
        }
    },
    methods: {
        // 获取uptoken
        get_uptoken() {
            axios({
                url: 'http://127.0.0.1:8000/day01/uptoken/',
                method: 'get'
            }).then(res=>{
                this.uptoken = res.data.token
            })
        },
        // 七牛云上传
        upload_qiniu(e) {
            // 获取文件对象
            let file = e.target.files[0]
            // 声明参数
            let form_data = new FormData()
            // 将上传凭证添加参数
            form_data.append('token', this.uptoken)
            // 添加图片
            form_data.append('file', file)
            // 定制化axios  不携带cookie上传
            const axios_qiniu = axios.create({withCredentials:false})
            // 发送请求
            axios_qiniu({
                method: 'post',
                url: 'http://up-z1.qiniu.com/',
                data: form_data,
                tiemout: 30000,

            }).then(res=>{
                console.log(res)
                this.img_url = 'http://media.donghaiming.cn/' + res.data.key
            })
        }
    },
    mounted() {
        this.get_uptoken()
    }
}
</script>