要在 Vue 中读取服务器上的 /aa/cc 目录下的 MP4 文件并进行播放

好的，下面是增加了中文注释的代码。

1. 后端（Python Flask）实现

1.1 修改 Flask 应用

在你的 Flask 应用中，添加一个新的路由来获取 MP4 文件列表：

python

复制

from flask import Flask, request, jsonify, send_from_directory
from werkzeug.utils import secure_filename
import os
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许跨域请求

UPLOAD_FOLDER = '/aa/cc'  # 文件保存的目录
ALLOWED_EXTENSIONS = {'mp4', 'avi', 'mov'}  # 允许的文件扩展名

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return jsonify({'error': 'No file part'}), 400

    file = request.files['file']

    if file.filename == '':
        return jsonify({'error': 'No selected file'}), 400

    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return jsonify({'message': 'File uploaded successfully'}), 200

    return jsonify({'error': 'File type not allowed'}), 400

# 获取文件列表的路由
@app.route('/files', methods=['GET'])
def get_files():
    files = os.listdir(app.config['UPLOAD_FOLDER'])
    mp4_files = [f for f in files if f.endswith('.mp4')]
    return jsonify({'files': mp4_files}), 200

# 提供文件下载的路由
@app.route('/files/<filename>', methods=['GET'])
def download_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

if __name__ == '__main__':
    app.run(debug=True)

2. 前端（Vue.js）实现

2.1 安装 axios

如果你还没有安装 axios，可以通过以下命令安装：

bash

复制

npm install axios

2.2 创建文件列表和播放组件

在你的 Vue 组件中，创建一个文件列表和播放器：

vue

复制

<template>
  <div>
    <h2>视频列表</h2>
    <ul>
      <li v-for="file in files" :key="file">
        <a href="#" @click="playVideo(file)">{{ file }}</a>
      </li>
    </ul>
    <video v-if="selectedFile" controls autoplay>
      <source :src="videoUrl" type="video/mp4">
      您的浏览器不支持 HTML5 视频标签。
    </video>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],  // 文件列表
      selectedFile: null,  // 当前选中的文件
    };
  },
  computed: {
    videoUrl() {
      return `http://your-server-url/files/${this.selectedFile}`;  // 视频文件的URL
    },
  },
  methods: {
    async fetchFiles() {
      try {
        const response = await axios.get('http://your-server-url/files');  // 获取文件列表
        this.files = response.data.files;
      } catch (error) {
        console.error('获取文件列表失败:', error);
      }
    },
    playVideo(file) {
      this.selectedFile = file;  // 设置当前选中的文件
    },
  },
  mounted() {
    this.fetchFiles();  // 组件挂载时获取文件列表
  },
};
</script>

3. 运行项目

1. 启动 Flask 后端：

   确保你的 Flask 应用已经运行，并且可以访问 /files 和 /files/<filename> 路由。

2. 启动 Vue 前端：

   运行你的 Vue 项目，确保文件列表和视频播放功能正常工作。

4. 注意事项

• 文件路径：确保 /aa/cc 目录在服务器上存在，并且 Flask 应用有权限读取该目录。

• 跨域问题：如果你在开发环境中遇到跨域问题，可以使用 Flask-CORS 来解决。

• 视频播放：确保你的浏览器支持 HTML5 视频标签，并且视频文件格式为 MP4。

通过以上步骤，你应该能够成功实现一个视频文件列表和播放功能，从服务器的 /aa/cc 目录中读取 MP4 文件并进行播放。