Я создаю собственное приложение на выставке, которое делает снимок и загружает это изображение в flask API, который запускает код на изображении. Ища некоторые инструкции о том, где начать устранение неполадок, я получаю ошибку при загрузке данных. Ниже приведены подробности:
Python Flask API: работает docker на локальном хосте, может легко связаться с браузером по reactjs без проблем.
React Native Expo: может передать изображение с камеры для предварительного просмотра, а затем попытаться загрузить это изображение в этот flask API. Expo 3.17.24
Я пытался запустить как эмулятор ios с npm run ios
, так и на моем пикселе 2xl с expo start
, но выдал следующую ошибку:
attempting to send... file:///Users/mac/Library/Developer/CoreSimulator/Devices/DAF0EB7D-28CD-4095-AADF-3AE19EFA63D9/data/Containers/Data/Application/3BA9A0E3-6AA8-4AAC-9940-B149805E9770/Library/Caches/ExponentExperienceData/%2540anonymous%252Fplatescanner-f49a8785-f3ac-4e4e-b8b5-d301d3f66403/Camera/A1ECA0D4-DE68-49CC-8ACB-AD6A73461113.jpg
FormData {
"_parts": Array [
Array [
"photo",
Object {
"name": "testPhotoName.jpg",
"type": "image/jpg",
"uri": "file:///Users/mac/Library/Developer/CoreSimulator/Devices/DAF0EB7D-28CD-4095-AADF-3AE19EFA63D9/data/Containers/Data/Application/3BA9A0E3-6AA8-4AAC-9940-B149805E9770/Library/Caches/ExponentExperienceData/%2540anonymous%252Fplatescanner-f49a8785-f3ac-4e4e-b8b5-d301d3f66403/Camera/A1ECA0D4-DE68-49CC-8ACB-AD6A73461113.jpg",
},
],
],
}
[Unhandled promise rejection: TypeError: Network request failed]
- node_modules/whatwg-fetch/dist/fetch.umd.js:473:29 in xhr.onerror
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:574:29 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue
Вот подходящие фрагменты моего кода, определенно можно добраться до тестового API:
PreviewScreen. js
import React, { Component } from 'react';
import { Text, View, StyleSheet, Alert,
ActivityIndicator, TouchableOpacity,
Image, Platform } from 'react-native';
import { connect } from 'react-redux';
import upload from '../assets/file_upload.png';
import ignoreWarnings from 'react-native-ignore-warnings';
ignoreWarnings('Setting a timer');
class previewScreen extends Component {
componentDidMount() {
console.log('fetching test api...')
//testing to make sure fetch works
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
}
//data.append('file', this.state.selectedFile);
//data.append('filename', this.state.selectedFile.name);
handleUploadImage=(photo)=> {
console.log('attempting to send...',photo.uri)
const data = new FormData();
//data.append('name', 'testName.jpg'); // you can append anyone.
data.append('photo', {
uri: photo.uri,
type: 'image/jpg', // or photo.type
name: 'testPhotoName.jpg'
});
console.log(data);
fetch('https://127.0.0.1:5000/upload', {
method: 'post',
body: data
}).then(res => {
console.log(res)
});
}
render() {
//console.log(this.props.reducer.scan);
//console.log('file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fplatescanner-f49a8785-f3ac-4e4e-b8b5-d301d3f66403/Camera/22866dc7-dba2-4dae-92f6-331b00e2eae5.jpg')
const data = this.props.navigation.getParam('data');
//console.log(data.uri);
return (
<View >
<Image
style={{width: '100%', height: '100%'}}
source={{
uri: data.uri
//require('../assets/flip.png')
}}/>
<View style={{position: 'absolute',
marginTop: '130%',
marginLeft: '45%'
}}>
<TouchableOpacity
onPress={()=>this.handleUploadImage(data)}
style={{
borderWidth:1,
borderColor:'rgba(0,0,0,0.2)',
alignItems:'center',
justifyContent:'center',
width:35,
height:35,
backgroundColor:'#fff',
borderRadius:50
}}>
<Image source={upload}/>
</TouchableOpacity>
</View>
</View>
);
}
}
const mapStateToProps = (state) => {
// console.log(state)
const { reducer } = state
return { reducer }
};
const mapDispachToProps = dispatch => {
return {
pullUser: () => dispatch({ type: "GET_USER_DATA", value: false}),
};
};
export default connect(mapStateToProps,mapDispachToProps)(
previewScreen
)
Есть идеи, что может произойти? Мой Flask API работает с использованием самозаверяющих сертификатов разработки. Хотите знать, если это проблема? Дело в том, что он нормально работает из браузера на сайте reactjs.