如何在React Native中将视频文件正确上传到服务器?

时间:2020-06-22 07:32:09

标签: react-native

问题:

在我的react native应用程序中,我正在录制视频,然后将其发送到后端服务器。这就是在录制视频后将其发送到组件中的商店的方式。

const cameraConfig = {maxDuration: 20};
  const data = await camera.recordAsync(cameraConfig);
  const token = JSON.parse(await AsyncStorage.getItem('auth_data'));
  CameraRoll.save(data.uri, 'video')
    .then((onfulfilled) => {
      console.log(onfulfilled);
    })
    .catch((error) => console.log(error));
  const question = questions[index];
  uploadvideo(data.uri, token.userId, type, question.questionId);

这是我的uploadVideo动作。

const uploadvideo = (byteArray, id, videoType, questionId) => {
  let culture = getCulture();
  var formData = new FormData();
  formData.append('uploadedFile', byteArray);
  console.log('>>>>> formData', formData);
  return (dispatch) => {
    dispatch(uploadVideo(questionId));
    return API.Post(
      `${endPoints.REST_API}/${culture}/${endPoints.UPLOAD_VIDEO}?userid=${id}&videoType=${videoType}&candidateAnswerId=${questionId}`,
      formData,
      // {
      //   headers: {
      //     'Content-Type': 'multipart/form-data',
      //     'Access-Control-Allow-Origin': '*',
      //   },
      // },
    )
      .then((data) => {
        console.log('>>>>>> data', data);
      })
      .catch((err) => {
        console.log('>>>>>> errr', err);
      });
  };
};

我创建了一个HTTP客户端文件,并将其作为API导入,以便文件看起来像这样。

import axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';

axios.defaults.headers.post['Content-Type'] = 'application/json';

let authToken;

const axiosInstance = axios.create({
  baseURL: '',
  timeout: 150000,
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosInstance.interceptors.request.use(
  function (config) {
    console.log('>>>>>> HII');
    if (authToken) {
      config.headers.Authorization = `Bearer ${authToken}`;
    }
    return config;
  },
  function (response) {
    return response;
  },
  function (error) {
    console.log('>>>>>>', error);
    if (error.response.status) {
      if (error.response.status === 401) {
        AsyncStorage.removeItem('auth_data');
      } else {
        return Promise.reject(error);
      }
    } else {
      return Promise.reject(error);
    }
  },
);

const setAuthorisationHeder = async () => {
  const token = JSON.parse(await AsyncStorage.getItem('auth_data'));
  if (token) {
    authToken = token.accessToken;
    console.log(authToken);
  }
};

export const Get = async (route, data = {}) => {
  await setAuthorisationHeder();
  return await axiosInstance.get(route);
};

export const Post = async (route, data) => {
  await setAuthorisationHeder();
  return await axiosInstance.post(route, data);
};

但是它给了我这样的错误。但是API文件没有调用post函数,并给我这样的错误。

errr Error: Request failed with status code 500
    at createError

这不是在创建API调用,而是可以告诉别人我做错了什么。我做了很多尝试,以找到一种解决方案的方法,但是我无法做到这一点,所以有人可以帮助我。非常感谢。

0 个答案:

没有答案