Question

我正在开发一个React＆Django项目，我构建了一个Django API，用于存储视频以及一些文本，只要我尝试在客户端渲染视频而不渲染视频。

我遇到的第一个问题是API没有给我正确的完整路径，

video: "/media/lectures/mat105-Part2.mp4"

所以我然后尝试通过修改路径来解决这个问题

http://127.0.0.1:8000/api${content.video}

我的API模型代码

class LectureVideos(models.Model):

    lecturer = models.CharField(max_length=100, blank=False, null=False)
    module = models.CharField(max_length=100, blank=False, null=False)
    video = models.FileField(upload_to='lectures')
    date = models.CharField(max_length=100, blank=False, null=False)

代码到我的API视图

@api_view(['GET'])
def getLectureVideos(request):

    videos = LectureVideos.objects.all()
    serializer = LectureVideoSerialzer(videos, many=True)

    return Response(serializer.data)

我尝试检索数据的客户端代码

class Video extends Component {
    constructor(props) {
    super(props);

    this.state = {
      lectureVideos: [],
    };
    this.getVideos = this.getVideos.bind(this);
  }

  componentDidMount() {
    this.getVideos();
  }

  getVideos() {
    const url = "http://127.0.0.1:8000/api/videos-list/";

    axios
      .get(url)
      .then((response) => {
        this.setState({
          lectureVideos: response.data,
        });
      })
      .then((res) => {
        console.log("Fetch Successful");
      })
      .then((res) => {
        console.log(this.state.lectureVideos);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    return (
      <div className="Video__container">
        <VideoList listvideos={this.state.lectureVideos} />
      </div>
    );
  }
}

export default Video;

最后，这是我拥有视频列表组件的位置，在这里我会渲染获取的数据，除了视频之外，所有内容都会渲染

const VideoList = (props) => {
  let videos = props.listvideos;

  return (
    <div className="video-list">
      {videos.map((content) => {
        return (
          <div key={content.id} className="video-container">
            <div className="lecture__video">
              <VideoPlayer
                src={`http://127.0.0.1:8000/api${content.video}`}
                width="300"
                height="250"
                playbackRates={[0.5, 1, 3.85, 16]}
                className="video"
              />
              <h3>{content.lecturer}</h3>
              <h4>{content.module}</h4>
              <p>{content.date}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default VideoList;

这是我的序列化器。py

from  rest_framework import serializers
from .models import LectureVideos


class LectureVideoSerialzer(serializers.ModelSerializer):

    class Meta:
        model = LectureVideos
        fields = '__all__'

这是我的设置。py

STATIC_URL = '/static/'
STATICFILES_DIR = [
    os.path.join(BASE_DIR, 'static')
]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

CORS_ORIGIN_WHITELIST = [

    "http://localhost:3000",
]

我最小化了设置文件，只显示了MEDIA_URL和MEDIA_ROOT

Django Api不向ReactJS客户端提供媒体文件

0 个答案: