本文介绍如何将自己训练好的模型在网页上进行应用，使用 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 underscores
for 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_ROOT
upload_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
感谢您的观看，后续将持续更新！！