一、上传单张图片(views.upload_image、uploadImage.html、配置url)
1.配置url
myImageSite/urls.py:
1 from django.contrib import admin 2 from django.urls import path 3 from imageSite import views 4 urlpatterns = [ 5 path(‘admin/‘, admin.site.urls), 6 path(‘uploadImage/‘, views.upload_image),# 地址为uploadImage/,对应函数为upload_image 7 8 ]
2.上传图片对应的templates/uploadImage.html:
1 <body> 2 <h1>上传图片</h1> 3 <form method="post" action="/uploadImage/" enctype="multipart/form-data"> 4 {% csrf_token %} 5 <input type="file" name="upload_img"> 6 <input type="submit" name="上传图片"> 7 </form> 8 </body>
3.上传图片对应函数imageSite/views.py:
1 from django.shortcuts import render, redirect,HttpResponse 2 from imageSite.models import Images 3 4 5 def upload_image(request): 6 """ 7 上传图片函数 8 :param request: 9 :return: 10 """ 11 # print(request.method) 12 img = request.FILES.get(‘upload_img‘) # 取得uploadImage.html form表单中的upload_img 13 new_img = Images(images=img) # 添加数据(表imageSite_images中添加一条数据:字段id自增，字段images=img) 14 new_img.save() # 保存后才能写入数据库 15 return render(request, "uploadImage.html")
这里不选择任何图片直接提交也会在数据库中插入id自增，images为空白的数据，暂时还没解决
因为在setting.py中设置了MEDIA_ROOT=BASE_DIR/‘static‘,在model.py的Images类中设置了上传路径upload_to="media"
上传的图片存在static目录下的media文件夹里。
在数据库中发现所有images字段的数据前面都带了上传路径media都是由“media/文件名”组成的.
以后要通过绝对路径操作文件就可以通过MEDIA_ROOT/images字段读取到文件
二、显示所有图片(views.show_images、showImages.html、配置url)
1.配置url
myImageSite/urls.py:
path(‘showImages/‘, views.show_images), # 地址为showImages/,对应函数为show_images
2.对应的html(templates/showImages.html)
1 <body> 2 <h1>显示所有图片</h1> 3 <table border="1"> 4 <thead> 5 <tr> 6 <th>ID</th> 7 <th>图片</th> 8 </tr> 9 </thead> 10 <tbody> 11 {% for img_name in img_list %} 12 <!-- img_list：对应函数show_images的image_list传递参数给img_list--> 13 <tr> 14 <td>{{img_name.id}}</td> 15 <!--循环遍历img_list，取所有id作为一列--> 16 <td><img src="{{ "/static/"}}{{img_name.images}}"/></td> 17 <!--循环遍历img_list，取所有images作为图片地址的一部分--> 18 </tr> 19 {% endfor %} 20 </tbody>
3.对应函数imageSite/views.py:
1 def show_images(request): 2 """ 3 显示所有图片 4 :param request: 5 :return: 6 """ 7 image_list = Images.objects.all() # 取得所有的Images对象 8 print(type(image_list)) 9 return render(request, "showImages.html", 10 {"img_list": image_list}) 11 # {"img_list": image_list}将所有Images对象传递到showImages.html的img_list中
三、增加删除图片操作
1.配置url
myImageSite/urls.py:
path(‘deleteImage/‘, views.delete_image),
2.对应html(在原showImages.html中加入)
templates/showImages.html:
<td><a href="/deleteImage/?deleteID={{ img_name.id }}">删除</a></td>
1 <tbody> 2 {% for img_name in img_list %} 3 <!-- img_list：对应函数show_images的image_list传递参数给img_list--> 4 <tr> 5 <td>{{img_name.id}}</td> 6 <!--循环遍历img_list，取所有id作为一列--> 7 <td><img src="{{ "/static/"}}{{img_name.images}}"/></td> 8 <!--循环遍历img_list，取所有images作为图片地址的一部分--> 9 <td><a href="/deleteImage/?deleteID={{ img_name.id }}">删除</a></td> 10 <!--通过url传递参数到deleteID获得要删除的图片的id（img_name.id） 11 相当于字典{deleteID:img_name.id}， 12 在views函数中用request.GET.get("deleteID")取得对应的img_name.id 13 --> 14 </tr> 15 {% endfor %} 16 </tbody>
3.对应的函数（delete_image和remove_file）
imageSite/views.py:
3.1 remove_file(name)函数:
1 def remove_file(name): 2 """ 3 删除指定name的本地文件 4 :param name: 图片在数据库中的images字段 5 :return: 6 """ 7 from myImageSite.settings import MEDIA_ROOT # 从settings.py中导入默认路径（static文件夹的路径) 8 import os 9 path = MEDIA_ROOT/name # 取得文件的绝对路径（static目录/name） 10 os.remove(path) # 删除文件
3.2 delete_image函数
1 def delete_image(request): 2 """ 3 删除数据库中对应id的数据 4 :param request: 5 :return: 6 """ 7 delete_id = request.GET.get("deleteID") # 取得要删除的图片id 8 delete_object = Images.objects.filter(id=delete_id) 9 # 取得字段id=delete_id的对象合集 10 # 用objects.filter取得的是对象的合集，只不过经过id=delete_id限定这个合集只有一个对象， 11 # 类似于长度为1的列表，可以用索引delete_object[0]来取值
delete_image_name = delete_object[0].images # 取得要删除数据对应的images字段，也就是本地图片的名称
remove_file("%s"%delete_image_name) # 删除本地文件，要把delete_image_name作为字符串给remove_file当参数
#要先删本地文件再删数据库行，否则会查不到delete_image_name
12 delete_object[0].delete() # 删除数据库对应行 13 return redirect("/showImages/") # 删除后再跳转到showImages
delete_image函数只能删除数据库中内容，不能删掉本地文件，所以要先删除文件再删除数据。还没学会直接删除的方法
四、一次上传多张图片
1.修改uploadImage.html:
<input type="file" name="upload_img"> 这一行改为<input type="file" name="upload_img"multiple="">在上传时就可以按住shift选中多张图片
2.修改imageSite/views.py的upload_image函数
1 def upload_image(request): 2 """ 3 上传图片函数 4 :param request: 5 :return: 6 """ 7 # print(request.method) 8 # img = request.FILES.get(‘upload_img‘) # 取得uploadImage.html form表单中的upload_img 9 # new_img = Images(images=img) # 添加数据(表imageSite_images中添加一条数据:字段id自增，字段images=img) 10 # new_img.save() # 保存后才能写入数据库 11 # 上传单张图片
12 # 上传多张 13 imgs = request.FILES.getlist("upload_img") 14 for imgs_images in imgs: 15 new_img = Images(images=imgs_images) 16 new_img.save() 17 return render(request, "uploadImage.html")
django边学边做：用Django3创建一个图片网站，实现多张图片上传、显示并删除图片（二、多张图片上传、显示、删除）