Django implements the upload image feature

Source: Internet
Author: User
Tags file url

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.