オリジナルの音楽プレーヤー機能をベースに、音楽をアップロードする機能が追加されています。
効果:
目次
アップロードパスを設定する
mymp3/settings.py ファイルの最後に次の構成を追加します。
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/media')
ルーティングを構成する
path(r'upload_music', views.upload_music, name='upload_music'),
処理中の曲を表示
ファイルがアップロードされると、ファイル データは request.FILES プロパティに保存されます。
注: フォームからファイルをアップロードするには、enctype="multipare/form-data" を追加する必要があります。
アップロードは投稿リクエストである必要があります。
クラスライブラリをインポートする
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
曲ファイルを保存する
csrf_exempt デコレーターによって csrf 検証を免除し、テンプレートによって送信されたファイルを読み取り、設定されたパスに書き込みます。
@csrf_exempt
def upload_music(request):
""" 上传歌曲文件 """
if request.method == 'POST':
file = request.FILES['file']
# 文件在服务端路径 获取配置
filePath = os.path.join(settings.MEDIA_ROOT, file.name)
# 保存文件
with open(filePath, 'wb+') as fp:
for info in file.chunks():
fp.write(info)
return JsonResponse({'code': 1, 'msg': '上传成功!'})
else:
return JsonResponse({'code': 0, 'msg': '请选择POST提交文件!'})
テンプレートのアップロード
楽曲ファイルのアップロードは、layuiのファイルアップロード機能を使用します; 本来の楽曲読み込みではドロップダウンメニューを使用しますが、layuiのアップロードイベントはバインドできないため、メニューリストを自分で書くように変更しました。
設定メニュー一覧
元の機能リストの設定を削除し、代わりに曲リスト要素の上にメニュー リストのコンテンツを追加します。
メニューリストは以下の通りです。
<!--菜单列表-->
<div id="menu-open">
<span class="layui-icon layui-icon-app menu-open"></span>
<ul class="menu-list none">
<li class="loadMusic">加载歌曲</li>
<li class="uploadMusic">上传歌曲</li>
</ul>
</div>
<!--菜单列表-->
メニューリストのスタイルを設定する
最も外側のプレイヤー コンテナに相対フローティングを設定し、メニュー リストに絶対フローティングを設定すると、デバッグ後も元の位置に留まります。
<style>
.none {
display: none;
}
#music-player{
position:relative;
}
#menu-open {
position:absolute;
top:24px;
right:35px;
}
#menu-open span{
color:#fff;
}
.menu-list {
position:absolute;
top:18px;
right:-82px;
margin: 5px 0;
background-color:#fff;
}
.menu-list li{
line-height: 26px;
color: rgba(0,0,0,.8);
font-size: 14px;
white-space: nowrap;
cursor: pointer;
padding:0 20px;
}
</style>
スクリプト設定
関数リストをメニューリストに変更し、アップロード関数バインディングをオリジナルベースで追加しているため、スクリプトの修正は比較的大きくなります。
内容は以下の通りです。
layui.use(['dropdown', 'util', 'layer', 'table'], function () {
var dropdown = layui.dropdown
, util = layui.util
, layer = layui.layer
, $ = layui.jquery
, upload = layui.upload;
// 上传音乐
var uploadInst = upload.render({
elem: '.uploadMusic'
, url: '/upload_music'
,accept: 'audio'
,exts: 'mp3'
, done: function (res) {
if(res.code > 0) {
layer.alert(res.msg, {icon: 1})
} else {
layer.alert(res.msg, {icon: 5})
}
}
, error: function () {
layer.alert('请求异常', {icon: 5})
}
});
// 打开菜单列表
$("#menu-open").on('click', function () {
$(".menu-list").toggleClass("none");
})
// 关闭菜单列表 点击菜单列表外的其他部分时关闭菜单列表
$(document).on('click', function (e) {
if ($(e.target).closest('.music-player').length < 1) {
$('.menu-list').addClass("none");
}
})
// 请求接口 导入歌曲到数据库
$('.loadMusic').click(function(){
$.ajax({
type: 'GET',
url: "/load_music",
data: {id:1},
success: function (data) {
layer.alert(data, {icon: 1})
}.bind(this),
error: function (e) {
console.log("ERROR : ", e);
}
});
})
})
アップロード効果
1. メニューリストを表示する
2. クリックして曲をアップロードします
3.アップロード完了
4. 保存したファイルを表示する
データベース操作の増加
現時点では、ファイルのアップロード機能のみが実装されており、プレイリストで曲を表示および再生するには、ファイルを検証し、対応する曲情報をデータベースに追加する必要があります。
検証の保存方法を変更する
元の insert_music メソッドを 2 つのメソッドに変更し、1 つは曲情報の検証を担当し、もう 1 つは保存操作を担当し、関数の戻り形式を変更します。
次のように:
def auth_music(name):
""" 验证歌曲文件 """
ext = 'mp3'
# 判断文件后缀
fileInfo = name.split('.')
if len(fileInfo) != 2:
return {'code': 0, 'msg': '文件有误'}
if fileInfo[1] != ext:
return {'code': 0, 'msg': '请上传MP3文件'}
# 查询歌曲是否存在
info = Single.objects.filter(title=name).first()
if info:
return {'code': 0, 'msg': '歌曲已存在'}
else:
return {'code': 1, 'msg': '可以上传'}
def insert_music(name):
""" 把歌曲信息插入数据表 """
single = Single()
single.title = name
signers = name.split('-')
single_1 = signers[1].strip('') if len(signers) > 1 else '未知'
single.singer = single_1.strip('.mp3')
single.songUrl = '/static/media/' + name
# 随机1-10专辑封面图片
sui_num = random.randint(1, 10)
single.imageUrl = '/static/images/' + str(sui_num) + '.png'
flag = single.save()
if flag:
return {'code': 0, 'msg': '上传失败,请重试!'}
else:
return {'code': 1, 'msg': '上传成功'}
曲のロード方法を変更する
上記メソッドの曲ロード関数を使用しているため、ループ内で曲情報を確認する関数を呼び出し、戻り値を判断して操作を保存するかどうかを決定するなど、それに応じた変更が必要です。
def load_music(request):
""" 加载本地的歌曲 """
# 项目路径
app_path = os.path.abspath(os.path.dirname(__file__))
# 获取媒体资源目录下所有歌曲文件
path = app_path + '/../static/media/'
files = os.listdir(path)
for file in files:
flag = auth_music(file)
if flag['code'] > 0:
print(insert_music(file))
else:
print(flag['msg'])
return HttpResponse('加载本地音乐成功!')
曲をライブラリにアップロードする
曲の検証およびウェアハウスの方法を変更する目的は、方法を汎用化し、アップロードされたファイルを直接使用できるようにし、プロンプト メッセージが返されるようにすることです。
@csrf_exempt
def upload_music(request):
""" 上传歌曲文件 """
if request.method == 'POST':
file = request.FILES['file']
flag = auth_music(file.name)
if flag['code'] < 1:
return JsonResponse(flag)
# 文件在服务端路径 获取配置
filePath = os.path.join(settings.MEDIA_ROOT, file.name)
# 保存文件
with open(filePath, 'wb+') as fp:
for info in file.chunks():
fp.write(info)
# 入库操作
flag = insert_music(file.name)
return JsonResponse(flag)
else:
return JsonResponse({'code': 0, 'msg': '请选择POST提交文件!'})
注: この時点では、request.FILES で取得したファイルがファイル オブジェクトです。保存するファイル名を取得するには file を使用する必要があります。
音楽プレーヤー バージョン 2 のソース コード
リンク: Baidu Netdisk 抽出コードを入力してください
抽出コード:e5th
要約する
元のベースに別の曲ファイルのアップロードを追加し、layui コントロールを使用してアップロードしました。
バックエンドは曲ファイルを検証し、ローカルに保存して、処理のためにライブラリに入れます。