七牛云vue上传大文件

注册七牛云账号

七牛云vue上传大文件

原理

1.django获取token值

from qiniu import Auth
def qiniu_token():
# 需要填写你的Access Key 和 Secret Key
access_key = 'gF6rL2ONmDB5GqyRtavfX9arCzR8EniQPvK-kbbe'
secret_key = '9Dy-f2F8ZsiXZVPMKpuZ8ioVoRJE_ViErKnSQI_q'
# 构建鉴权对象
q = Auth(access_key, secret_key)
# 要上传的空间
backet_name = 'songqikai'
# 生成上传 Token，可以指定过期时间等
token = q.upload_token(backet_name, expires=3600)
return token

from utils.MyBaseView import qiniu_token
class Qiniu(APIView):
def get(self, request):
token = qiniu_token()
return Response({'msg':'成功', 'code':200, 'token':token})

2.vue上传文件

首先下载七牛云的JavaScript-SDK

npm install qiniu-js

下载完成JavaScript-SDK以后就可以上传图片信息了

<template>
<div>
<input type="file" name='upFile' id="upFile" @change='changeFile($event)'>
<input type="button" name="开始上传" value="开始上传" @click='uploadFile()'>
<img v-if="coverUrl" :src="coverUrl" alt="封面">
<el-progress :percentage="filePercent"></el-progress>
{{filePercent}}
</div>
</template>
<script>
import * as qiniu from "qiniu-js";
export default {
name:'qiniu',
data() {
return {
file:null,
videoUrl:null,
coverUrl:null,
filePercent:0
};
},
methods: {
changeFile(e){
// 获取文件
this.file = e.target.files[0];
},
uploadFile() {
// 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。
let _this = this
// 获取身份的token
let token = 'gF6rL2ONmDB5GqyRtavfX9arCzR8EniQPvK-kbbe:b4W_bqnTWZih3XhHFsEjQctExaQ=:eyJzY29wZSI6InNvbmdxaWthaSIsImRlYWRsaW5lIjoxNjA0ODk0NTc2fQ=='
// 上传时的配置
var config = {
useCdnDomain: true
};
// 设置文件的配置
var putExtra = {
fname: "",
params: {},
mimeType: null
};
// 实例化七牛云的上传实例
var observable = qiniu.upload(_this.file, null, token, putExtra, config);
// 设置实例的监听对象
var observer = {
// 接收上传进度信息
next(res) {
// 上传进度
_this.filePercent = parseInt(res.total.percent)
if(_this.filePercent==100){
console.log("success")
}
},
// 接收上传错误信息
error(err) {
console.log(err)
},
// 接收上传完成后的信息
complete(res) {
console.log(res.key)
}
};
// 上传开始
var subscription = observable.subscribe(observer);
}
}
};
</script>