django基于mysql实现图片上传与打开

Posted 2021-01-06 wts-home

1：在models.py文件中建立数据表

　from django.db import models

　class User(models.Model):
       img = models.ImageField(upload_to=‘img‘,null=True)

　　因为我是后来添加的图片字段，所以需要在里面加个null=True，至于Upload_to是文件板寸的路径

2：配置setting.py

TEMPLATES = [
    {
        ‘BACKEND‘: ‘django.template.backends.django.DjangoTemplates‘,
        ‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)]
        ,
        ‘APP_DIRS‘: True,
        ‘OPTIONS‘: {
            ‘context_processors‘: [
                ‘django.template.context_processors.media‘,#这个一定要有
                ‘django.template.context_processors.debug‘,
                ‘django.template.context_processors.request‘,
                ‘django.contrib.auth.context_processors.auth‘,
                ‘django.contrib.messages.context_processors.messages‘,

            ],
        },
    },
]

　　这个就像配置static差不多，我原本是把MEDIA_URL写成‘/media/‘的，不过读取图片的时候找不到  改成‘Blog/media/‘就可以了   Blog是我的项目名

MEDIA_ROOT = os.path.join(BASE_DIR, ‘media‘)
#设置静态文件路径为主目录下的media文件夹
MEDIA_URL = ‘Blog/media/‘
#url映射

　　3：执行

　　　　python manage.py makemigrations 生成偏移文件

　　　　python manage.py migrate 生成数据库文件

　　4：templates下的模板文件

　　（1）upload.html

 <form method="POST" enctype="multipart/form-data" >
    {% csrf_token %}
    <input type="file" name="img">
    <button type="submit">上传</button>

首先需要一个form，enctype="multipart/form-data" method="post" 是必须要填写的，表示数据不经过编码，直接上传。{%csrf_token%}也是post时，django强制要求的。

（2）showing.html

{% for image in imgs %}
        {% if image.img %}
{#            这种方式也可以打开图片<img src="{{ MEDIA_URL }}{{ image.img }}" />#}
            <img src="{{ image.img.url }}" />
        {% endif %}
    {% endfor %}

　　5：配置urls

 url(r‘^upload‘, views.uploadImg),
 url(r‘^show‘, views.showImg,name=‘showimg‘),

　　6：views.py

# 上传图片
def uploadImg(request):
    if request.method == ‘POST‘:
        new_img = Loginon(
            img=request.FILES.get(‘img‘)
        )
        new_img.save()
    return render(request, ‘img_tem/uploadimg.html‘)
# 显示图片
def showImg(request):
    imgs = Loginon.objects.all()
    content = {
        ‘imgs‘:imgs,
    }
    return render(request, ‘img_tem/showimg.html‘, content)