python - django/react 检索和播放音频文件

Question

模型.py

from django.db import models
from datetime import datetime

class Song(models.Model):
    title = models.CharField(max_length=64)
    audio_file = models.FileField()
    genre = models.CharField(max_length=64)
    created_at = models.DateTimeField(default=datetime.utcnow)

序列化程序.py

from rest_framework import serializers
from . import models

class SongSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Song
        fields = '__all__'

视图.py

from . import models, serializers
from rest_framework import viewsets, status
from rest_framework.response import Response
from rest_framework.views import APIView

class SongView(APIView): # get the songs
    def get(self, request, format=None):
        serializer = serializers.SongSerializer(models.Song.objects.all(), many=True)
        return Response(serializer.data) 

网址.py

from django.urls import path
from . import views

urlpatterns = [
    path('songs/', views.SongView.as_view(), name='songs')
]

主页.js

import React from 'react'
import { useState, useEffect } from 'react'
import axios from 'axios'

const Home = () => {
    const getSongs = () => {
        axios.get('http://localhost:8000/api/songs/')
            .then(res => setSongs(res.data)) // see data below (Response.json)
    }

    let [songs, setSongs] = useState([])

    useEffect(() => {
        getSongs()
        console.log(songs)
    }, [])

    return (
    <>
        {
        songs.map(song =>
            (<div className='music-controller'>
                <div className="music-controller-body">
                    <div className="music-controller-header">
                        <h2>{song.title}</h2>
                        <p><small>{song.genre}</small></p>
                    </div>
                    <div className="controls">
                        <i className="fas fa-play"></i>
                        <audio src={song.audio_file} autoPlay></audio> // Cannot retrieve url
                    </div>
                </div>      
            </div>)
            )}
    </>
    )
}

export default Home

响应.json

[
    {
        "id": 1,
        "title": "Kubbi | Cascade",
        "audio_file": "/media/Kubbi__Cascade.mp3",
        "genre": "Instrumental",
        "created_at": "2021-07-24T10:21:48Z"
    }
]

我想要做的就是提取音频数据"/media/Kubbi__Cascade.mp3"以便我可以实际播放它，我尝试实现另一个视图来获取 URL，urls = [x.audio_file.url for x in models.Song.objects.all()]但最终获得了实际路径，我能做什么？

标签： pythonreactjsdjangodjango-rest-frameworkaxios