Django implements the upload image feature

Many times we need to use the image upload function, if the picture has been put on other sites, by loading the way to display the URL is actually quite troublesome, we use django-filer this module to achieve the image file directly on their own website.

Interested students can look at the official introduction: Https://github.com/divio/django-filer

1. Install with PIP.

Install Django-filer

This module requires DJANGO-MPTT, Easy_thumbnails, django-polymorphic, and pillow, but the PIP will automatically install it when the Django-filer is installed.

2. Django-filer configuration.

Add the following to the settings.py:

Installed_apps = [    #image upload Module Django-filer    'easy_thumbnails',    'filer',    'MPTT',]#supports Retina high resolution devicesThumbnail_high_resolution =True#working with indented graphsThumbnail_processors = (    'Easy_thumbnails.processors.colorspace',    'Easy_thumbnails.processors.autocrop',    'filer.thumbnail_processors.scale_and_crop_with_subject_location',    'easy_thumbnails.processors.filters',)#Store picture folder settingsFiler_storages = {    ' Public': {        'Main': {            'ENGINE':'Filer.storage.PublicFileSystemStorage',            'OPTIONS': {                ' Location':'Project Path/media/filer',                'Base_url':'/media/filer/',            },            'upload_to':'filer.utils.generate_filename.randomized',            'Upload_to_prefix':'Filer_public',        },        'thumbnails': {            'ENGINE':'Filer.storage.PublicFileSystemStorage',            'OPTIONS': {                ' Location':'Project Path/media/filer_thumbnails',                'Base_url':'/media/filer_thumbnails/',            },        },    },    'Private': {        'Main': {            'ENGINE':'Filer.storage.PrivateFileSystemStorage',            'OPTIONS': {                ' Location':'Project Path/smedia/filer',                'Base_url':'/smedia/filer/',            },            'upload_to':'filer.utils.generate_filename.randomized',            'Upload_to_prefix':'Filer_public',        },        'thumbnails': {            'ENGINE':'Filer.storage.PrivateFileSystemStorage',            'OPTIONS': {                ' Location':'Project Path/smedia/filer_thumbnails',                'Base_url':'/smedia/filer_thumbnails/',            },        },    },}#Specify the location of the Media_urlMedia_url ='/media/'Meida_root='Project Path/media/'

In the above settings, location is the folder address where the file is actually stored, and Base_url is the static file URL to be specified when it is displayed.

Add the following program code to the urls.py in order to upload the image file when the static file processing:

 from  django.conf import   settings   From  django.conf.urls.static import   Staticurlpatterns  = [ #   others URLs ...  URL (r " ^files/  ", include ("   Filer.urls   "  #   ...  ]urlpatterns  + = static (settings. Media_url, Document_root=settings. Meida_root)  

When the above settings are complete, synchronize the database ./manage.py migrate, let the module add the required data table. Executes ./manage.py collectstatic, refreshes the static file, loads Django-filer own CSS and Javascript files. We can see 2 out of two datasheets on Admin admin page.

We can then create new folders, upload files, and delete folders and files in the Folders data sheet.

3. Add the Django-filer image file to the datasheet

Using the Filerimagefield field provided by the Filer module, the ability to upload an image file is integrated into the established data item.

In the models.py file, add:

 from Import Filerimagefield

and change the image variable in the data table where you want to place the picture to:

Image = Filerimagefield (related_name='product_image')

Delete the other files and Db.sqlite3 files under migrations except __init__.py, re-execute./manage.py makemigrations and./manage.pymigrate, Refresh Admin Admin page, enter Image field, you can see that the image field has more functionality to upload the file.

We can then upload the file by clicking Choose files.

After uploading the image, change the IMG address in the HTML file to

'{{Product.image.url}}'>

The picture will be displayed correctly.

Django implements the upload image feature