Django基础入门08

 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)

完成图片的展示