Django入门:实现一个页面同时上传文本和图片,并保存至MySQL
2019-06-10 10:07
399 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qizhen816/article/details/91361388
Django实现一个页面上传Char和Image至后台MySQL
网上关于Django文件上传的教程,大多数使用单独页面,并在上传完成后页面跳转,这种方法虽然利于展示,但是对刚熟悉Django和html的新手来说不太友好,对于将文本和图片同时上传至数据库的简单需求可以用如下方法解决:
settings.py
首先在MySQL中建立数据库,在Django中注册项目、连接数据库,并定义
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql',#//数据库的类型 'USER': 'root', #数据库服务器的用户 'PASSWORD': 'root', #密码 'NAME': 'Mydata', # 'NAME': 所使用的的数据库的名字,大小写字母和MySQL中完全对应 'HOST': '127.0.0.1', #主机 'PORT': '3306' #端口 } }
由于使用了图片的media功能,需要在TEMPLATES中声明:
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', ], }, }, ]
增加Media文件夹用于存图片文件:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') #设置静态文件路径为主目录下的media文件夹 MEDIA_URL = '/media/' #url映射
models.py
在数据库中定义字段格式,在这里定义了5个Char类型和一个Image类型:
#数据库 class User(models.Model): username = models.CharField(max_length=50) password = models.CharField(max_length=50 7ff7 ) age = models.CharField(max_length=100) gender = models.CharField(max_length=100) illhistry = models.CharField(max_length=100) img = models.ImageField(upload_to='') def __unicode__(self): return self.username
定义完成后要迁移:
python manage.py makemigrations python manage.py migrate
views.py
然后在页面后台中增加获取数据和存入数据库的语句:
#上传 def upload(req): if req.method == 'POST': uf = UserForm(req.POST,req.FILES) if uf.is_valid(): #获得表单数据 username = uf.cleaned_data['username'] password = uf.cleaned_data['password'] age = uf.cleaned_data['age'] gender = uf.cleaned_data['gender'] illhistry = uf.cleaned_data['illhistry'] img = uf.cleaned_data['img'] #添加到数据库 user = User.objects.create(username= username,password=password,age=age,gender=gender,illhistry=illhistry,iris=iris) user.save() return HttpResponse('upload success!!') else: uf = UserForm() return render(req,'test.html',context= {'uf':uf})
test.html
页面中的表单:
#上传 {% csrf_token %} <p class="meta-info"> 姓名:{{uf.username}} </p> <p class="meta-info"> 密码:{{uf.password}} </p> <p class="meta-info"> 年龄:{{uf.age}} </p> <p class="meta-info"> 性别:{{uf.gender}} </p> <p class="meta-info"> 既往病史:{{uf.illhistry}} </p> <p class="meta-info"> 上传图片:{{uf.img}} </p> <p class="meta-info"> <input class="mybutton" type="submit" value = "完成" /> </p>
其他
这种方法将文本以Char的形式储存在MySQl数据表中,图片则是存储其在服务器中的路径。
相关文章推荐
- servlet+jsp同一个页面上传文字图片,并将图片地址保存到MYSQL
- 黄聪:如何在wordpress任何一个页面调用“插入图片”按钮,实现上传图片功能
- javaweb上传图片,并且从数据库中查出,在页面显示,同时保存图片到数据库中
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- Python web入门:Django学习与实践二(简单页面实现和创建一个模板)
- 黄聪:如何在wordpress任何一个页面调用“插入图片”按钮,实现上传图片功能
- 如何在wordpress任何一个页面调用“插入图片”按钮,实现上传图片功能
- base64编码的文本 转为 图片 实现上传保存
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- spring+mybaits+MySQL 实现图片上传并保存数据库
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片变换的特效(同时淡入淡出效果)
- 一个实现图片上传/产生缩略图/在上传图片上写字功能的完整页面代码
- cxgrid如何实现一个单元格内同时放图片和文本
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- SpringMVC+mybatis实现图片文本同时上传并储存数据库中
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- 如何实现图片的上传以及将图片保存到Mysql
- hchxxzx--》一个实现图片上传/产生缩略图/在上传图片上写字功能的完整页面代码
- [原](源码)JS OOP 实现页面浮动图片,支持多图同时浮动,简单调用
- asp.net 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图