七牛云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>