一、配置环境
django 3.0.3
qiniu 7.2.6
全部可以使用pip安装
二、在app的目录下创建qiniu_config.py文件,用于存放七牛云的相关配置信息
qiniu_config = {
'access_key': '',
'secret_key': '',
'bucket_name': '',
'domine': '',
}
#bucket_name:空间名
#domine:cdn加速域名
三、views.py
from django.shortcuts import render, HttpResponse
import qiniu
import json
from qiniu_app.qiniu_config import qiniu_config
# 七牛身份验证
def qiniu_auth():
access_key = qiniu_config['access_key']
secret_key = qiniu_config['secret_key']
q = qiniu.Auth(access_key, secret_key)
return q
# Create your views here.
# 将上传处理后的图片刷新到cdn节点,减少回源流量
def cdn_flush(key):
auth = qiniu_auth()
cdn_manager = qiniu.CdnManager(auth)
domine = qiniu_config['domine']
need_flush_url = domine + key
# 需要刷新的文件链接
urls = [
need_flush_url,
]
# URL刷新链接
refresh_url_result = cdn_manager.refresh_urls(urls)
return
# 进行上传的图片处理
def dealwith_img(request):
q = qiniu_auth()
key = request.GET.get('key')
bucket_name = qiniu_config['bucket_name']
# pipeline是使用的队列名称,不设置代表不使用私有队列,使用公有队列。
# pipeline = 'your_pipeline'
# 要进行的转换格式操作。
fops = 'imageView2/0/format/webp/interlace/1'
# 可以对缩略后的文件进行使用saveas参数自定义命名,当然也可以不指定文件会默认命名并保存在当前空间
saveas_key = qiniu.urlsafe_base64_encode(bucket_name + ':' + key)
fops = fops + '|saveas/' + saveas_key
# pfop = qiniu.PersistentFop(q, bucket_name, pipeline)
pfop = qiniu.PersistentFop(q, bucket_name)
ops = []
ops.append(fops)
ret, info = pfop.execute(key, ops, 1)
assert ret['persistentId'] is not None
cdn_flush(key)
return HttpResponse(json.dumps('ok'))
# 获取七牛上传的token
def qntoken(request):
q = qiniu_auth()
key = request.GET.get('key')
bucket = qiniu_config['bucket_name']
token = q.upload_token(bucket, key)
return HttpResponse(json.dumps({'token': token}))
def qiniu_test(request):
return render(request, 'qiniu_test.html')
四、urls.py
from django.urls import path
from qiniu_app import views
urlpatterns = [
path('qntoken/', views.qntoken, name="qntoken"),
path('', views.qiniu_test, name="qiniu_test"),
path('dealwith_img/', views.dealwith_img, name="dealwith_img"),
]
五、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
</head>
<body>
<from>
<input type="file" id="img" value="上传图片">
</from>
上传后的url:<span id="img_url"></span>
<script>// 上传完图片后做的事情
function com_img(ret) {
var img_name = ret['key'];
var domine = ''; // cdn加速域名
var img_url = domine + img_name; //合成访问的链接
$('span#img_url').text(img_url);
// 在后端处理上传的图片
$.ajax({
url: '{% url 'dealwith_img' %}',
type: 'GET',
data: {'key': img_name},
dataType: 'json',
error: function () {
alert("处理失败")
}
})
}
$('#img').change(function () {
var token = '';
var file_img = $('#img').get(0).files[0];
var key = (new Date()).getTime() + '.' + file_img.name.split('.')[1];
$.ajax({
url: '{% url 'qntoken' %}',
type: 'GET',
data: {'key': key},
dataType: 'json',
success: function (token_msg) {
token = token_msg['token'];
console.log(token);
var putExtra = {
fname: key,
params: {},
mimeType: ['image/png', 'image/jpeg']
};
var config = {
useCdnDomain: true,
retryCount: 6,
region: qiniu.region.z0
};
var observable = qiniu.upload(file_img, key, token, putExtra, config)
var subscription = observable.subscribe({'error': up_err, 'complete': com_img}) // 上传开始
}
});
}
);
</script>
</body>
</html>