在 web 部署 YOLOv8目标检测（Django+html）
本文介绍如何将自己训练好的模型在网页上进行应用，使用 Django + html 进行部署，能够对视频和图像进行识别，并显示到页面上，下面是一个效果：
上 传 和另外 7 个页面 - 个人 - Microsoft Edge 2025-03-13 21-52-06
下面进行教学，想直接要源码的直接滑到最底下。
首先配置环境，设置一个全局文件夹，用于储存每次选择和检测完的图片和视频：
setting.py 中加入:
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')并在 app01 下新建一个 media 文件夹用于存放检测完的图片和视频。
html 页面：
<!DOCTYPE html>
<html>
<head><title>上 传</title>
</head>
<body><h1>web部署yolo实现图片视频检测</h1><form method="post" id="upload-form" enctype="multipart/form-data">
{# enctype="multipart/form-data" 表单上传文件必须设置#}{% csrf_token %}<label for="{{ form.file.id_for_label }}"></label><br>{{ form.file }}<br><br><button type="submit">检测</button></form><div id="result"><!-- 处理结果显示区域 --><h2>检测结果:</h2><img id="processed-image" src="" alt="Processed Image" style="display:none; max-width: 100%;"/><video id="processed-video" controls style="display:none; max-width: 100%;"><source id="processed-video-source" src="" type="video/mp4">Your browser does not support the video tag.</video></div>
</body>
</html>文件上传部分用的 from 表单，点击检测按钮后，表单以 POST 请求提交到后台。
后台在接收之前，先定义两个函数：
该函数用于将用户提交的文件名进行清理
def secure_filename(filename):"""Secure a filename by removing or replacing invalid characters."""if filename is None:return None# Replace spaces with underscoresfor sep in os.path.sep, os.path.altsep:if sep:filename = filename.replace(sep, '_')# 去掉前后空格filename = filename.strip()# 去掉前面可能存在的.filename = filename.lstrip('.')# 将不合理路径修改valid_chars = "-_.() %s%s" % (string.ascii_letters, string.digits)cleaned_filename = ''.join(c for c in filename if c in valid_chars)return cleaned_filename如果不使用 secure_filename 函数来清理上传的文件名，可能会遇到以下问题：
- 安全风险：用户可以上传带有路径分隔符的文件名，尝试覆盖服务器上的其他文件，甚至执行目录遍历攻击。
- 文件名冲突：如果文件名包含非法字符或特殊符号，可能导致文件系统无法正确处理这些文件名，造成文件存储失败或其他异常行为。
- 不可预测的行为：不同的操作系统对文件名有不同的限制，忽略这些限制可能会导致应用在某些环境中运行不稳定。
该函数用于处理视频检测
def process_video(video_path, output_path):model = YOLO(r'F:\全栈\Django\YOLO_django\app01\files\best.pt')clip = VideoFileClip(video_path)# 检测每一帧def process_frame(frame):results = model(frame)# 返回每一帧的识别结果return results[0].plot()# clip.fl_image 对原始视频每一帧进行函数应用modified_clip = clip.fl_image(process_frame)modified_clip.write_videofile(output_path, codec='libx264')best.pt 是自己训练的模型，我这是车辆识别模型，包括 car 、van、bus、trunk 四种类型，可以替换成自己的模型，我的模型在文章结尾也会给出。
接下来是最主要的视图函数：
def detect(request):if request.method == 'POST':form = UploadFileForm(request.POST, request.FILES)if form.is_valid():uploaded_file = request.FILES['file']filename = secure_filename(uploaded_file.name)media_root = settings.MEDIA_ROOTupload_path = os.path.join(media_root, filename)os.makedirs(media_root, exist_ok=True)with open(upload_path, 'wb') as f:for chunk in uploaded_file.chunks():f.write(chunk)try:model = YOLO(r'F:\全栈\Django\YOLO_django\app01\files\best.pt')except Exception as e:return JsonResponse({"error": str(e)}, status=500)if filename.lower().endswith(('.png', '.jpg', '.jpeg')):frame = cv2.imread(upload_path)if frame is None:return JsonResponse({"error": "Failed to read the image"}, status=500)results = model(frame)processed_image = results[0].plot()processed_image_path = os.path.splitext(upload_path)[0] + '_processed.png'cv2.imwrite(processed_image_path, processed_image)processed_image_url = os.path.join(settings.MEDIA_URL,os.path.relpath(processed_image_path, media_root))data = {"imgid": filename, "processed_image_url": processed_image_url}elif filename.lower().endswith(('.mp4', '.avi', '.mov')):processed_video_path = os.path.splitext(upload_path)[0] + '_processed.mp4'process_video(upload_path, processed_video_path)processed_video_url = os.path.join(settings.MEDIA_URL,os.path.relpath(processed_video_path, media_root))data = {"videoid": filename, "processed_video_url": processed_video_url}else:return JsonResponse({"error": "Unsupported file format"}, status=400)return JsonResponse(data)else:form = UploadFileForm()print("form:",form)return render(request, 'upload.html', {'form': form})该函数将上传的图片或者视频进行检测，并将结果保
<script>document.getElementById('upload-form').onsubmit = async function(event) {event.preventDefault();const formData = new FormData(this);const response = await fetch('', {method: 'POST',body: formData,});const result = await response.json();if (result.processed_image_url || result.processed_video_url) {const processed_image = document.getElementById('processed-image');const processed_video = document.getElementById('processed-video');const processed_video_source = document.getElementById('processed-video-source');if(result.processed_image_url){processed_image.src = result.processed_image_url;processed_image.style.display = 'block';processed_video.style.display = 'none'; // 隐藏视频元素} else if(result.processed_video_url){processed_video_source.src = result.processed_video_url;processed_video.load(); // 重新加载视频元素processed_video.style.display = 'block';processed_image.style.display = 'none'; // 隐藏图片元素}}};</script>存到文件夹中，并构造 url 路径，返回给 web 页面。
接下来在 html 中编写 js 代码:
通过添加表单监听事件，异步获取后端返回的内容，判断资源类型，再赋值给相应的 DOM 元素
<script>document.getElementById('upload-form').onsubmit = async function(event) {event.preventDefault();const formData = new FormData(this);const response = await fetch('', {method: 'POST',body: formData,});const result = await response.json();if (result.processed_image_url || result.processed_video_url) {const processed_image = document.getElementById('processed-image');const processed_video = document.getElementById('processed-video');const processed_video_source = document.getElementById('processed-video-source');if(result.processed_image_url){processed_image.src = result.processed_image_url;processed_image.style.display = 'block';processed_video.style.display = 'none'; // 隐藏视频元素} else if(result.processed_video_url){processed_video_source.src = result.processed_video_url;processed_video.load(); // 重新加载视频元素processed_video.style.display = 'block';processed_image.style.display = 'none'; // 隐藏图片元素}}};</script>今天的分享就到这儿了，项目已打包好放在我的资源中:
https://download.csdn.net/download/2403_83182682/90481398
感谢您的观看，后续将持续更新！！