使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储

简介: 之前一篇文章是通过普通js+tornado来上传七牛云:[使用Tornado配合七牛云存储api来异步切分上传文件](https://v3u.cn/a_id_123),本次使用vue+django来进行异步上传,因为毕竟vue.js才是目前的前端的主流。

之前一篇文章是通过普通js+tornado来上传七牛云:使用Tornado配合七牛云存储api来异步切分上传文件,本次使用vue+django来进行异步上传,因为毕竟vue.js才是目前的前端的主流。

首先注册七牛云:qiniu.com,进入你的七牛云账号,打开秘钥页,记录下你的ak和sk

随后新建一个云存储空间,这里空间名字一定要记录一下:

此时我们用django写一个获取uptoken的接口,使用drf框架来写,注意别忘了安装七牛云扩展 pip install qiniu

#七牛云token
from qiniu import Auth
class QiNiu(APIView):
    def get(self,request):
        q = Auth('E2IZM3koC1GR1DUqJHactmixzdyZZhx0edBKqDsk','GDnMkvRoE_kFhCSuvdqQj0VcNsRDOHzYJJ_bVd0_')
        token = q.upload_token('redinnovation')
        print(token)
        res = {}
        res['uptoken'] = token

        return Response(res)

之后启动django服务:python3 manage.py runserver

访问django服务,确保每一次都会生成新的token,访问http://localhost:8000/uptoken/

接口已经调试好,回到vue.js页面,添加一个上传控件

{{ imgLoadPercent }}

 <input @change="uploadInputchange"  id="uploadFileInput" type="file" >

这里的imgLoadPercent是上传进度的展示

data () {
      return {
          uptoken:'',
        imgLoadPercent:'',
}
}

然后在methods里添加几个方法:

get_token(){

         this.axios.get('http://localhost:8000/uptoken/').then((result) =>{
        console.log(result);
        this.uptoken = result.data.uptoken;
        });
        },
    //触发input change事件
    uploadInputchange(){
        let file = document.getElementById("uploadFileInput").files[0];   //选择的图片文件
        this.get_token();
        this.uploadImgToQiniu(file);
    },
    //上传图片到七牛
    uploadImgToQiniu(file){

        console.log(this.uptoken);

        const axiosInstance = this.axios.create({withCredentials: false});    //withCredentials 禁止携带cookie,带cookie在七牛上有可能出现跨域问题
        let data = new FormData();
        data.append('token',this.uptoken);     //七牛需要的token
        data.append('file', file);
        axiosInstance({
            method: 'POST',
            url: 'http://up-z1.qiniu.com/',  //上传地址,华北的空间是up-z1.qiniu.com
            data: data,
            timeout:30000,      //超时时间,因为图片上传有可能需要很久
            onUploadProgress: (e)=> {
                //imgLoadPercent 是上传进度,可以用来添加进度条


                var complete = (e.loaded / e.total);

                if (complete < 1) {
                
                    this.imgLoadPercent = (complete *100).toFixed(2)+ '%';

                }


            },
        }).then(data =>{
           console.log(data);
           this.imgLoadPercent = '100%';
        }).catch(function(err) {
            //上传失败
        });
    }

逻辑就是每一次上传之前,请求一次后台django的接口获取token,需要注意一点,在实际操作中,onUploadProgress这个方法并不能完全的真实展示上传进度,受限于网络或者别的因素导致它会有一定的提前量或者延迟,所以我们在这个方法内做了一个类似安慰剂按钮的效果,就是人为限制它不会变为100%,只有当七牛云返回结果的时候再赋值为100%。

最后,如果上传成功后,七牛云接口会返回文件的key

通过url即可访问。

相关文章
|
28天前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
179 45
|
21天前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
38 12
|
28天前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
29天前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
|
29天前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
|
1月前
|
JSON JavaScript API
深入浅出Node.js:从零开始构建RESTful API
【10月更文挑战第39天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件应用的桥梁。本文将带领读者从零基础出发,逐步深入Node.js的世界,最终实现一个功能完备的RESTful API。通过实践,我们将探索如何利用Node.js的异步特性和强大的生态系统来构建高效、可扩展的服务。准备好迎接代码和概念的碰撞,一起解锁后端开发的新篇章。
|
1月前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
49 4
|
1月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
60 2
|
29天前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用