在 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 页面：

    


    
web部署yolo实现图片视频检测
    

{#        enctype="multipart/form-data" 表单上传文件必须设置#}
        {% csrf_token %}
        

        {{ form.file }}

        

        检测
    

    

        
        
检测结果:
        
        
    

文件上传部分用的 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})

该函数将上传的图片或者视频进行检测，并将结果保

存到文件夹中，并构造 url 路径，返回给 web 页面。

接下来在 html 中编写 js 代码:

通过添加表单监听事件，异步获取后端返回的内容，判断资源类型，再赋值给相应的 DOM 元素

今天的分享就到这儿了，项目已打包好放在我的资源中:

https://download.csdn.net/download/2403_83182682/90481398

感谢您的观看，后续将持续更新！！