uniapp访问django目录中的图片和视频,2025[最新]中间件访问方式

 新建中间件,

middleware.py

匹配,以/cover_image/ 开头的图片

匹配以/episode_video/ 开头的视频

imageSrc: 'http://192.168.110.148:8000/cover_image/12345/1738760890657_mmexport1738154397386.jpg',
videoSrc: 'http://192.168.110.148:8000/episode_video/12345/compress_video_99945997.mp4'

import os
import re
import mimetypes
from django.conf import settings
from django.http import StreamingHttpResponse, Http404, HttpResponse


class VideoStreamMiddleware:
    """视频流中间件"""

    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        # 检查请求的路径是否以 '/episode_video/' 开头
        if request.path.startswith('/episode_video/'):
            user_id = request.path.split('/')[2]
            print("request.path----------", user_id)
            return self.stream_video(request, user_id)

        # 检查请求的路径是否以 '/cover_image/' 开头
        if request.path.startswith('/cover_image/'):
            user_id = request.path.split('/')[2]
            print("request.path----------", user_id)
            return self.stream_image(request,user_id)

        response = self.get_response(request)
        return response

    def stream_video(self, request, user_id):
        filename = request.path.split('/')[-1]  # 从路径中提取文件名
        path = os.path.join(settings.MEDIA_ROOT, 'episode_video/' + user_id, filename)  # 视频文件存储路径
        print("path是，，，，，，", path)
        if not os.path.exists(path):
            raise Http404("File not found")

        range_header = request.META.get('HTTP_RANGE', '').strip()
        range_re = re.compile(r'bytes\s*=\s*(\d+)\s*-\s*(\d*)', re.I)
        range_match = range_re.match(range_header)
        size = os.path.getsize(path)
        content_type, _ = mimetypes.guess_type(path)
        content_type = content_type or 'application/octet-stream'

        if range_match:
            first_byte, last_byte = range_match.groups()
            first_byte = int(first_byte) if first_byte else 0
            last_byte = first_byte + 1024 * 1024 * 8  # 默认8MB每片
            if last_byte >= size:
                last_byte = size - 1
            length = last_byte - first_byte + 1
            resp = StreamingHttpResponse(self.file_iterator(path, offset=first_byte, length=length), status=206,
                                         content_type=content_type)
            resp['Content-Length'] = str(length)
            resp['Content-Range'] = f'bytes {first_byte}-{last_byte}/{size}'
        else:
            # 返回整个文件
            resp = StreamingHttpResponse(self.file_iterator(path), content_type=content_type)
            resp['Content-Length'] = str(size)

        resp['Accept-Ranges'] = 'bytes'
        return resp

    def stream_image(self, request,user_id):
        filename = request.path.split('/')[-1]  # 从路径中提取文件名
        path = os.path.join(settings.MEDIA_ROOT, 'cover_image/'+user_id, filename)  # 图片文件存储路径
        print("image path是，，，，，，", path)
        if not os.path.exists(path):
            raise Http404("File not found")

        content_type, _ = mimetypes.guess_type(path)
        content_type = content_type or 'application/octet-stream'

        # 返回图片文件
        with open(path, 'rb') as f:
            response = HttpResponse(f.read(), content_type=content_type)
            response['Content-Length'] = os.path.getsize(path)
            return response

    def file_iterator(self, file_name, chunk_size=8192, offset=0, length=None):
        """文件迭代器，按块读取文件"""
        with open(file_name, "rb") as f:
            f.seek(offset, os.SEEK_SET)
            remaining = length
            while True:
                bytes_length = chunk_size if remaining is None else min(remaining, chunk_size)
                data = f.read(bytes_length)
                if not data:
                    break
                if remaining:
                    remaining -= len(data)
                yield data

不要忘记在settings.py中注册中间件

'user.middleware.VideoStreamMiddleware'

uniapp中 新建界面 访问

<template>
  <view class="container">
    <text class="title">展示图片和视频</text>
    
    <!-- 展示图片 -->
    <image :src="imageSrc" mode="aspectFit"></image>
    <video :src="videoSrc" controls></video>
   
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'http://192.168.110.148:8000/cover_image/12345/1738760890657_mmexport1738154397386.jpg',
	  videoSrc: 'http://192.168.110.148:8000/episode_video/12345/compress_video_99945997.mp4'
    };
  }
};
</script>

<style>

</style>