Django admin实现图片上传到腾讯云

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中使用上传的图片。在实际开发中,这种方法可以避免本地文件系统的容量限制,并提高了文件的访问速度和可靠性。

后端开发标签