一、上传单张图片(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为空白的数据,暂时还没解决
MEDIA_ROOT=BASE_DIR/'static',在model.py的Images类中设置了上传路径upload_to="media"
上传的图片存在static目录下的media文件夹里。
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"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")