1. 介绍
在开发Web应用程序时,管理页面是很重要的一部分,而Django admin是一种流行的解决方案,可以快速创建管理页面。在管理页面中,我们通常需要上传图片,本文将介绍如何将图片上传至腾讯云对象存储并在Django admin中使用。
2. 创建腾讯云对象存储
首先,需要在腾讯云中创建一个对象存储bucket。在腾讯云控制台中,选择对象存储服务,然后创建一个新的bucket。在创建过程中,需要选择bucket所在的地域、设置访问权限、开启版本控制等。创建成功后,可以在bucket列表中查看该bucket。
3. 安装依赖包
要在Django中使用腾讯云对象存储,需要安装腾讯云Python SDK。可以使用pip命令安装:
pip install -U cos-python-sdk-v5
4. 配置腾讯云密钥
在Django项目中配置腾讯云密钥,以便使用Python SDK操作腾讯云对象存储。可以在项目的settings.py文件中添加以下配置:
COS_SECRET_ID = 'your_secret_id'
COS_SECRET_KEY = 'your_secret_key'
COS_REGION_NAME = 'ap-guangzhou'
COS_BUCKET_NAME = 'your_bucket_name'
其中,COS_SECRET_ID和COS_SECRET_KEY是腾讯云API密钥,COS_REGION_NAME是bucket所在的地域,COS_BUCKET_NAME是bucket的名称。
5. 编写上传文件的视图
Django中的视图是用来处理HTTP请求并返回HTTP响应的Python函数。我们需要编写一个视图,用来处理上传文件的请求。在views.py文件中添加以下代码:
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from qcloud_cos import CosConfig
from qcloud_cos import CosS3Client
import uuid
def index(request):
return render(request, 'index.html')
@csrf_exempt
def upload(request):
if request.method == 'POST' and request.FILES.get('file'):
cos_config = CosConfig(Region=COS_REGION_NAME, SecretId=COS_SECRET_ID, SecretKey=COS_SECRET_KEY)
cos_client = CosS3Client(cos_config)
file = request.FILES['file']
key = str(uuid.uuid4()) + '.' + file.name.split('.')[-1]
cos_client.upload_file_from_buffer(
Bucket=COS_BUCKET_NAME,
Body=file,
Key=key,
EnableMD5=False
)
url = 'https://' + COS_BUCKET_NAME + '.cos.' + COS_REGION_NAME + '.myqcloud.com/' + key
return JsonResponse({'url': url})
return JsonResponse({'error': '上传失败'})
代码中,主要的函数是upload函数,用来处理上传文件的请求。当请求方法为POST且包含文件时,会将文件上传至腾讯云对象存储,并返回文件的访问URL。
6. 编写上传文件的模板
视图处理完上传文件的请求后,需要显示一个表单让用户上传文件。在templates文件夹下新建一个index.html文件,添加以下内容:
<html>
<head>
<title>Upload File</title>
</head>
<body>
<form id="upload-form" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="file" id="file-input" accept="image/*" />
<input type="submit" value="Upload" />
</form>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#upload-form').on('submit', function (event) {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: '/upload/',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (data) {
var url = data.url;
$('#result').append('<img src="' + url + '">');
},
error: function () {
$('#result').text('文件上传失败');
}
});
});
</script>
</body>
</html>
代码中,表单使用了enctype="multipart/form-data"属性,以支持文件上传。向服务器上传文件时,需要将表单数据转换为FormData对象。在Ajax请求中,使用了FormData对象上传文件并将响应URL显示在页面上。
7. 将文件上传至腾讯云
运行Django应用程序,并访问http://127.0.0.1:8000/,将会看到一个上传文件的表单。选择一个图片文件上传,即可在页面上看到图片并获得图片的访问URL,这是在腾讯云对象存储中保存的文件。
8. 在Django admin中使用图片
对于Django admin,我们可以利用Django中提供的FileField或ImageField字段,将文件保存在腾讯云对象存储中。新建一个Django app,并在models.py文件中定义一个模型,如下所示:
from django.db import models
class User(models.Model):
name = models.CharField(max_length=50)
avatar = models.ImageField(upload_to='avatars/')
代码中,avatar字段是ImageField类型,同时通过upload_to参数指定了文件上传的目标文件夹。
在admin.py文件中,注册该模型并设置相应的字段:
from django.contrib import admin
from .models import User
class UserAdmin(admin.ModelAdmin):
list_display = ('name', 'avatar_tag')
readonly_fields = ('avatar_tag',)
def avatar_tag(self, obj):
if obj.avatar:
return '<img src="{}" width="50" />'.format(obj.avatar.url)
avatar_tag.short_description = '头像'
admin.site.register(User, UserAdmin)
代码中,avatar_tag是一个自定义的字段,用来显示头像。在list_display中添加该字段,同时设置readonly_fields,以禁止在编辑时修改头像。代码中,当头像不为空时,使用HTML img标签来显示头像。
9. 测试
在管理页面中,添加一个用户并上传一张头像。在列表中将会显示头像的缩略图。点击头像旁边的链接,即可在新标签页中查看完整的头像。如果头像未能正确显示,可以在浏览器中查看HTML源代码,检查图片的src属性是否正确。
10. 结论
本文介绍了如何在Django中上传图片至腾讯云对象存储,并在Django admin中使用上传的图片。在实际开发中,这种方法可以避免本地文件系统的容量限制,并提高了文件的访问速度和可靠性。