Загрузка нескольких файлов с использованием реакции и Django REST API - PullRequest
Новая
       3

Загрузка нескольких файлов с использованием реакции и Django REST API

0 голосов
/ 20 марта 2020

Я строю проект, в котором пользователи могут загружать видео в большом количестве, Мой код работает нормально, но я хочу показать пользователям индикатор выполнения, когда их видео загружаются на сервер, Проведя некоторые исследования на inte rnet Я обнаружил, что можно использовать событие onUploadProgress Ax ios, но я не знаю, как отправить ход загрузки каждого видеофайла отдельно.

Ниже приведен мой код

редукторы. js файл - 

import * as actionTypes from "../actions/types";

const intialState = {
  isLoading: false,
  uploadProgress: 0,
  error: null
};

export default function(state = intialState, action) {
  switch (action.type) {
    case actionTypes.ADD_VIDEO_START:
    case actionTypes.ADD_VIDEO_SUCCESS:
    case actionTypes.ADD_VIDEO_ERROR:
      return {
        ...state,
        isLoading: action.isLoading,
        error: action.error
      };
    case actionTypes.VIDEO_UPLOAD_PROGRESS:
      return {
        ...state,
        uploadProgress: action.percentage
      };
    default:
      return state;
  }
}

действия. js

import * as actionTypes from "./types";
import { getToken, VIDEO_URL } from "./Utils";
import axios from "axios";

export const addVideos = video => dispatch => {
  if (getToken()) {
    dispatch({
      type: actionTypes.ADD_VIDEO_START,
      isLoading: true,
      error: null,
    });
    const config = {
      headers: {
        Accept: "application/json",
        "Content-Type": "multipart/form-data",
        Authorization: `Token ${getToken()}`
      },
      onUploadProgress: progressEvent => {
        const { loaded, total } = progressEvent;
        let percentage = Math.floor((loaded * 100) / total);
        dispatch({
          type: actionTypes.VIDEO_UPLOAD_PROGRESS,
          percentage: percentage
        });
      }
    };

    let form_data = new FormData();
    form_data.append("video", video);

    axios
      .post(COURSE_CONTENT_URL, form_data, config)
      .then(() =>
        dispatch({
          type: actionTypes.ADD_VIDEO_SUCCESS,
          isLoading: false,
          error: null
        })
      )
      .catch(error =>
        dispatch({
          type: actionTypes.ADD_VIDEO_ERROR,
          isLoading: false,
          error: error,
        })
      );
  } else {
    console.log("You are not authenticated");
  }
};

videoComponent. js

...

const courseContent = {
    video: [], // <- All the videos to be uploded are kept here
};

//submit function
const handleSubmit = () => {
  courseContent.video.map(file => props.addVideos(file));
};

...

views.py 

...
@api_view(['POST'])
@parser_classes([FormParser, MultiPartParser])
@authentication_classes([TokenAuthentication])
@permission_classes([IsAuthenticated])
def add_content(request):
    models.Videos.objects.create(
        user=request.user,
        video=request.FILES.get('video')
    )
    return Response(status=status.HTTP_201_CREATED)
...

Любая помощь по этому вопросу будет высоко ценится.

...