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

数据库筹划（models.py）

1. class Music(models.Model):
2.     """ 音乐 """
3.     name = models.CharField(verbose_name="音乐名字", max_length=32)
4.     singer = models.CharField(verbose_name="歌手", max_length=32)
6.     # 本质上数据库也是CharField,自动保存数据。
7.     music = models.FileField(verbose_name="音频", max_length=128)

复制代码

链接（urls.py）

1. # 音频上传
2.     path('music/upload/', music.music_upload),
3.     path('music/add/', music.music_add),

复制代码

处置惩罚代码（music.py）

1. from django.shortcuts import render, redirect
2. from app01 import models
5. def music_upload(request):
6.     queryset = models.Music.objects.all()
7.     return render(request, 'music_upload.html', {'queryset': queryset})
10. from app01.utils.bootstrap import BootStrapModelForm
13. class UpModelForm(BootStrapModelForm):
14.     bootstrap_exclude_fields = ['music']
16.     class Meta:
17.         model = models.Music
18.         fields = "__all__"
21. def music_add(request):
22.     """ 上传文件和数据 """
23.     title = "音频上传"
24.     if request.method == "GET":
25.         form = UpModelForm()
26.         return render(request, 'upload_form.html', {"form": form, "title": title})
28.     form = UpModelForm(data=request.POST, files=request.FILES)
29.     if form.is_valid():
30.         # 对于文件:自动保存;
31.         # 字段 + 上传路径写入到数据库
32.         form.save()
34.         return redirect("/music/upload/")
35.     return render(request, 'upload_form.html', {"form": form, "title": title})

复制代码

前端页面（music_upload.html）

1. {% extends 'layout.html' %}
3. {% block content %}
4.     <div class="container">
5.         <div style="margin-bottom: 10px">
6.             <a class="btn btn-success" href="/music/add/" target="_blank">
7.                 <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
8.                 音频上传
9.             </a>
10.         </div>
12.         <div class="panel panel-default">
13.             <!-- Default panel contents -->
14.             <div class="panel-heading">
15.                 <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
16.                 音频列表
17.             </div>
19.             <!-- Table -->
20.             <table class="table table-bordered">
21.                 <thead>
22.                 <tr>
23.                     <th>音频</th>
24.                     <th>音乐名称</th>
25.                     <th>歌手</th>
26.                 </tr>
27.                 </thead>
28.                 <tbody>
29.                 {% for obj in queryset %}
30.                     {% if obj.music.name|slice:'-4:' == ".mp3" %}
31.                         <tr>
32.                             <td>
33.                                 {% if obj.music.name|slice:'-4:' == ".png" %}
34.                                     <img src="/media/{{ obj.music }}" style="height: 80px;">
35.                                 {% else %}
36.                                     <audio controls>
37.                                         <source src="/media/{{ obj.music }}">
38.                                     </audio>
39.                                 {% endif %}
40.                             </td>
41.                             <td>{{ obj.name }}</td>
42.                             <td>{{ obj.singer }}</td>
43.                         </tr>
44.                     {% endif %}
45.                 {% endfor %}
46.                 </tbody>
47.             </table>
48.         </div>
49.         <div class="clearfix">
50.             <ul class="pagination" style="float:left;">
51.                 {{ page_string }}
52.             </ul>
53.         </div>
54.     </div>
55. {% endblock %}

复制代码

前端页面（upload_form.html）

1. {% extends 'layout.html' %}
3. {% block content %}
4.     <div class="container">
5.         <div class="panel panel-default">
6.             <div class="panel-heading">
7.                 <h3 class="panel-title">{{ title }}</h3>
8.             </div>
9.             <div class="panel-body">
10.                 <form method="post" enctype="multipart/form-data" novalidate>
11.                     {% csrf_token %}
12.                     {% for field in form %}
13.                         <div class="form-group">
14.                             <label>{{ field.label }}</label>
15.                             {{ field }}
16.                             <span style="color: red;">{{ field.errors.0 }}</span>
17.                         </div>
18.                     {% endfor %}
20.                     <button type="submit" class="btn btn-primary">提 交</button>
21.                 </form>
22.             </div>
23.         </div>
24.     </div>
25. {% endblock %}

复制代码

页面展示

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。