时间戳

首页 > 解决方案 > 在 React Native 中上传视频时出错

react-native - 在 React Native 中上传视频时出错

问题描述

我正在使用 react-native-image-picker 从移动设备获取视频，并使用 fetch 方法将其上传到服务器。不知道我做错了什么？

constructor(props){
 super(props);
 this.state = {
   isLoading:true,
   isModalVisible: false,
   isOptionVisible:false,
   avatarSource:"",
   chapname:'',
   chapdesc:''
 }
};

var formData = new FormData();
formData.append('name', 'video name');
formData.append('desc', 'video description');
formData.append('file', {uri: this.state.avatarSource, name: this.state.avtarname.fileName, type: 'video/mp4'});

fetch(api, {
  method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type' :'multipart/form-data',
      'Authorization': `JWT ${teacher_token}`
    },
    body: formData
})

这是我从手机中挑选视频时的回应

{path: "/storage/emulated/0/DCIM/Camera/VID_20200306_172706.mp4", uri: "content://com.miui.gallery.open/raw/%2Fstorage%2Fe…ted%2F0%2FDCIM%2FCamera%2FVID_20200306_172706.mp4"}

我得到的错误是网络请求失败。这是控制台上出现的错误

Fetch Error TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (E:\eshikshaserver\node_modules\whatwg-fetch\dist\fetch.umd.js:473)
at XMLHttpRequest.dispatchEvent (E:\eshikshaserver\node_modules\event-target-shim\dist\event-target-shim.js:818)
at XMLHttpRequest.setReadyState (E:\eshikshaserver\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574)
at XMLHttpRequest.__didCompleteResponse (E:\eshikshaserver\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388)
at E:\eshikshaserver\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:501
at RCTDeviceEventEmitter.emit (E:\eshikshaserver\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
at MessageQueue.__callFunction (E:\eshikshaserver\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436)
at E:\eshikshaserver\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111
at MessageQueue.__guard (E:\eshikshaserver\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384)
at MessageQueue.callFunctionReturnFlushedQueue (E:\eshikshaserver\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110)

我知道我错过了一些东西，但找不到它。卡在它上面。

标签： react-nativefile-uploadreact-native-image-picker

解决方案

推荐阅读