JRP-Version-1.2.2023.12.30

Version : 1.2.2023.12.30
修改项：
增加部分格式的文本和视频浏览的功能

        self.app.route('/view_file/<path:file_name>')(self.view_file)  # 预览
        self.app.route('/preview/<path:file_name>')(self.preview)  # 跳转预览网页
        self.app.route('/send_view_file/<path:filename>')(self.send_view_file)  # 根据不同文件，发送文件给HTML显示

函数块：

    def view_file(self, file_name):
        if not file_name.startswith('/'):
            if not re.match('.:', file_name):
                file_name = '/' + file_name
        return render_template('index.html',
                               foldername=file_name,
                               show_view_file=True,
                               show_upload=False
                               )

    def preview(self, file_name):
        type_ = file_name.split('.')[-1]  # 防止多个 .. 造成判断错误
        if not file_name.startswith('/'):
            if not re.match('.:', file_name):
                file_name = '/' + file_name
        return render_template('preview.html',
                               filename=file_name,
                               pre_type=type_
                               )
    
    def send_view_file(self, filename):
        # 设置文件文件夹路径
        if not filename.startswith('/'):
            if not re.match('.:', filename):
                filename = '/' + filename
        VIDEO_FOLDER = os.path.dirname(filename)
        file_name = os.path.basename(filename)
        self.app.config['UPLOAD_FOLDER'] = VIDEO_FOLDER
        # 使用send_from_directory发送文件
        return send_from_directory(self.app.config['UPLOAD_FOLDER'], file_name)

由于需要有个浏览页面，所以添加了新的一个 HTML模版preview.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player</title>
    <style>
        #video-container {
            position: relative;
        }
    </style>
</head>
<body>

<!-- 使用 HTML5 的 video 元素 -->
<div id="video-container">
    <li><a href="{{ url_for('mainweb') }}">首页</a></li>
    {% if pre_type in ["mp4", "mov"]  %}
        <h1>视频播放</h1>
        <h1>{{ video_type }}</h1>
        <video id="my-video" width="640" height="360" controls>
            {% if pre_type == "mp4" %}
                <source src="{{ url_for('send_view_file', filename=filename) }}" type="video/mp4">
            {% elif pre_type == "mov" %}
                <source src="{{ url_for('send_view_file', filename=filename) }}" mimetype="/video/quicktime">
            {% endif %}
        </video>
    {% elif pre_type in ["txt", "log", "csv"]  %}
        <h1>文本浏览</h1>
        <p><a href="{{ url_for('send_view_file', filename=filename) }}" target="_blank">打开文本文件</a></p>
    {% else %}
    <h1>暂不支持 {{pre_type}} 后缀文件浏览 </h1>
    {% endif %}

</div>
</body>
</html>

这里用到的主要功能：

<!--播放mp4格式文件-->
<source src="{{ url_for('send_view_file', filename=filename) }}" type="video/mp4">
<!--播放mov格式文件-->
<source src="{{ url_for('send_view_file', filename=filename) }}" mimetype="/video/quicktime">
<!--width="640" 视频窗口默认宽度 height="360" 默认高度 controls 添加播放，暂停声音等等的控件-->
<video id="my-video" width="640" height="360" controls>

其他几个模板也有些许修改，包括在使用的时候遇到的一些问题

效果展示可以直接看这个录屏，手机操作的，所以预览文本文件直接下载了，在电脑上是新开一个窗口显示文本文件：

JRP