使用Django框架实现音频上传功能

数据库设计(models.py

python 复制代码
class Music(models.Model):
    """ 音乐 """
    name = models.CharField(verbose_name="音乐名字", max_length=32)
    singer = models.CharField(verbose_name="歌手", max_length=32)

    # 本质上数据库也是CharField,自动保存数据。
    music = models.FileField(verbose_name="音频", max_length=128)

链接(urls.py

python 复制代码
# 音频上传
    path('music/upload/', music.music_upload),
    path('music/add/', music.music_add),

处理代码(music.py

python 复制代码
from django.shortcuts import render, redirect
from app01 import models


def music_upload(request):
    queryset = models.Music.objects.all()
    return render(request, 'music_upload.html', {'queryset': queryset})


from app01.utils.bootstrap import BootStrapModelForm


class UpModelForm(BootStrapModelForm):
    bootstrap_exclude_fields = ['music']

    class Meta:
        model = models.Music
        fields = "__all__"


def music_add(request):
    """ 上传文件和数据 """
    title = "音频上传"
    if request.method == "GET":
        form = UpModelForm()
        return render(request, 'upload_form.html', {"form": form, "title": title})

    form = UpModelForm(data=request.POST, files=request.FILES)
    if form.is_valid():
        # 对于文件:自动保存;
        # 字段 + 上传路径写入到数据库
        form.save()

        return redirect("/music/upload/")
    return render(request, 'upload_form.html', {"form": form, "title": title})

前端页面(music_upload.html)

html 复制代码
{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/music/add/" target="_blank">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                音频上传
            </a>
        </div>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                音频列表
            </div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>音频</th>
                    <th>音乐名称</th>
                    <th>歌手</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    {% if obj.music.name|slice:'-4:' == ".mp3" %}
                        <tr>
                            <td>
                                {% if obj.music.name|slice:'-4:' == ".png" %}
                                    <img src="/media/{{ obj.music }}" style="height: 80px;">
                                {% else %}
                                    <audio controls>
                                        <source src="/media/{{ obj.music }}">
                                    </audio>
                                {% endif %}
                            </td>
                            <td>{{ obj.name }}</td>
                            <td>{{ obj.singer }}</td>
                        </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="clearfix">
            <ul class="pagination" style="float:left;">
                {{ page_string }}
            </ul>
        </div>
    </div>
{% endblock %}

前端页面(upload_form.html)

html 复制代码
{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{ title }}</h3>
            </div>
            <div class="panel-body">
                <form method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="form-group">
                            <label>{{ field.label }}</label>
                            {{ field }}
                            <span style="color: red;">{{ field.errors.0 }}</span>
                        </div>
                    {% endfor %}

                    <button type="submit" class="btn btn-primary">提 交</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

页面展示

相关推荐
巴博尔几秒前
自定义tabs+索引列表,支持左右滑动切换
前端·uniapp
诗句藏于尽头12 分钟前
音乐播放器-单html文件
前端·html
歪歪10013 分钟前
ts-jest与其他TypeScript测试工具的对比
前端·javascript·测试工具·typescript·前端框架
CodeSheep18 分钟前
JetBrains官宣,又一个IDE可以免费用了!
前端·后端·程序员
刘新明198920 分钟前
Frida辅助分析OLLVM虚假控制流程(下)
java·开发语言·前端
江城开朗的豌豆36 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician41 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN66681 小时前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD1 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆1 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序