Day 09 Django上传图片到数据库并在前端显示
1. 创建文件夹image用于存储将要上传的图片
我是在HelloWorld项目下创建了此文件夹(在哪里创建都可以)
2.安装pillow模块(使用ImageField先安装pillow模块)
进入python目录 使用命令pip3 install pillow进行安装
3.在APP(TestModel)的models中添加如下代码(如何创建APP参见 Day05 Django模型)建立模型。
class Image(models.Model):
name=models.CharField(max_length=50)
image=models.ImageField(upload_to='logo')
def _str_(self):
returnself.name
这里的upload_to是指定图片存储的文件夹名称,上传文件之后会自动创建。
4. 建立好模型,需要进行迁移操作(也就是告诉Djangon你的模型发生了变化)
在命令行输入如下:
python manage.py makemigrations
python manage.py migrate
刷新数据库如下:
5. 在settings.py中,设置MEDIA_URL和MEDIA_ROOT
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
在settings文件末尾加上以上两行代码即可。
我们需要告诉Django,媒体文件的位置在哪里。这样就和数据库存储的路径相对应了,具体就是MEDIA_ROOT指定目录,upload_to就是在这个目录下进行操作。与步骤3中的对应。
6. 在上一节的基础上,我们学会了admin 后台管理,上一节我们已经创建了超级用户,此处不再赘述。
7. 在在app下admin.py中将需要上面创建的模型进行添加。
修改代码如下:
from django.contrib import admin
from TestModel.models import Test,Contact,Tag,Image
# Register your models here.
class TagInline(admin.TabularInline):
model = Tag
class ContactAdmin(admin.ModelAdmin):
list_display = ('name','age','email') # list
search_fields = ('name',)
inlines = [TagInline] # Inline
fieldsets = (
['Main',{
'fields':('name','email'),
}],
['Advance',{
'classes':('collapse',),
'fields': ('age',),
}]
)
admin.site.register(Contact, ContactAdmin)
admin.site.register([Test])
admin.site.register(Image)
8.打开Django服务器,在浏览器中访问http://127.0.0.1:8000/admin即可出现以下页面:
点击Add,即可出现以下页面,进行图片的添加
9. 添加后在数据库中就可以看到插入的图片
10. 接下来是如何在前台调取数据库中的图
修改Helloworld/view.py代码如下
#http请求给view.py
fromdjango.shortcuts import render
fromTestModel.models import Image
defimage(request):
img= Image.objects.all()
return render(request, 'showing.html',{'img':img})
11.在Helloworld\templates 下新建'showing.html'显示图片,代码如下:
{% for iin img %}
<imgsrc="{{ MEDIA_URL }}{{ i.image }}">
{% endfor%}
12.打开settings.py修改代码
TEMPLATES = [
{
'BACKEND':'django.template.backends.django.DjangoTemplates',
'DIRS':[BASE_DIR+"/templates",],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'django.template.context_processors.media',#### add here
],
},
},
]
13修改urls.py添加路径
fromdjango.conf.urls import url
from .import view
fromdjango.contrib import admin
from django.conf.urls.staticimport static
fromdjango.conf import settings
urlpatterns=[
url(r'^hello$', view.hello),
url(r'^image$',view.image),
url(r'^admin/',admin.site.urls)
]
但到这里还是不能正常显示图片,如下图
14. 修改urls.
fromdjango.conf.urls import url
from .import view
fromdjango.contrib import admin
fromdjango.conf.urls.static import static
fromdjango.conf import settings
urlpatterns=[
url(r'^hello$', view.hello),
url(r'^image$', view.image),
url(r'^admin/',admin.site.urls)
]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
完成图片的展示