使用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即可访问。

相关文章
|
5天前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
24 8
|
2天前
|
缓存 前端开发 JavaScript
基于JavaScript的前端性能优化技术探讨
基于JavaScript的前端性能优化技术探讨
12 1
|
2天前
|
JSON JavaScript 中间件
利用Node.js和Express构建RESTful API服务
利用Node.js和Express构建RESTful API服务
8 0
|
2天前
|
Web App开发 JavaScript 前端开发
构建高效Web API:使用Node.js与Express框架
构建高效Web API:使用Node.js与Express框架
7 0
|
3天前
|
缓存 安全 中间件
Python小白必备!清华大牛整理的《Django零基础入门到精通》手册
Django 是 Python 社区的两大最受欢迎的 Web 框架之一(另一个是 Flask)。凭借功能强大的脚手架和诸多开箱即用的组件,可以使你能够以最小的代价构建和维护高质量的Web应用。 从好的方面来看,Web 开发激动人心且富于创造性;从另一面来看,它却是份繁琐而令人生厌的工作。 通过减少重复的代码,Django 使你能够专注于 Web 应用上有趣的关键性的东西。 为了达到这个目标,Django提供了通用Web开发模式的高度抽象,提供了频繁进行的编程作业的快速解决方法,以及为“如何解决问题”提供了清晰明了的约定。 同时,Django 尝试留下一些方法,来让你根据需要在framework
|
5天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
14 1
|
5天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
9 1
|
5天前
|
存储 设计模式 前端开发
Python Django框架总介绍
Python Django框架总介绍
9 0
|
6天前
|
前端开发 JavaScript 中间件
基于最新koa的Node.js后端API架构与MVC模式
基于最新koa的Node.js后端API架构与MVC模式
17 1
|
6天前
|
前端开发 网络架构
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)