Проблема Загрузка данных изображения в Flask API из-за реакции собственной сети? - PullRequest
Новая
       9

Проблема Загрузка данных изображения в Flask API из-за реакции собственной сети?

0 голосов
/ 16 апреля 2020

Я создаю собственное приложение на выставке, которое делает снимок и загружает это изображение в 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.

...