上传界面

package-lock.json

@@ -7258,6 +7258,11 @@
         }
       }
     },
+    "react-native-background-upload": {
+      "version": "4.1.0",
+      "resolved": "http://registry.npm.taobao.org/react-native-background-upload/download/react-native-background-upload-4.1.0.tgz",
+      "integrity": "sha1-EAZmWc1miVxHrBGXiahtai1zALo="
+    },
     "react-native-camera": {
       "version": "0.12.0",
       "resolved": "http://registry.npm.taobao.org/react-native-camera/download/react-native-camera-0.12.0.tgz",

src/components/cameraComponent.js

@@ -14,6 +14,7 @@ import { encrypt } from '../utils/helper';
 import config from '../utils/config';
 import { futch } from '../utils/polyfill';
 import { userApi } from '../services/interfaces';
+import { uploadResource } from '../services/resource';
 
 const styles = StyleSheet.create({
   container: {
@@ -76,6 +77,7 @@ class CameraComponent extends React.Component {
     this.takePicture = this.takePicture.bind(this);
     this.uploadImage = this.uploadImage.bind(this);
     this.clear = this.clear.bind(this);
+    this.goToUpload = this.goToUpload.bind(this);
   }
   typeIcon= () => {
     const { back, front } = Camera.constants.Type;
@@ -127,7 +129,7 @@ class CameraComponent extends React.Component {
         this.camera.stopCapture();
         this.setState({ isRecording: false });
       }
-      console.log('stopped ');
+      console.log('stopped');
     }
   }
   takePicture() {
@@ -192,6 +194,16 @@ class CameraComponent extends React.Component {
   clear() {
     this.setState({ imageURI: '' });
   }
+  uploadImage2 = () => {
+    console.info('输出上传');
+    console.info(this.state);
+    uploadResource(this.state.imageURI, (uploadId, arg) => console.info(arg), (uploadId, arg) => console.info(`陈宫${arg}`), (uploadId, arg) => console.info(arg))
+      .then(uploadId => console.log(`start task ${uploadId}`))
+      .catch(err => console.log(err));
+  }
+  goToUpload() {
+    this.props.navigation.navigate('DSRInfoTuPian', { imageURI: this.state.imageURI });
+  }
 
   render() {
     if (this.state.imageURI === '') {
@@ -227,7 +239,7 @@ class CameraComponent extends React.Component {
           />
           <View style={[styles.overlay, styles.bottomOverlay]}>
             <Icon.Button name="clear" size={48} backgroundColor="transparent" onPress={this.clear} />
-            <Icon.Button name="done" size={48} backgroundColor="transparent" onPress={this.uploadImage} />
+            <Icon.Button name="done" size={48} backgroundColor="transparent" onPress={this.uploadImage2} />
           </View>
         </View>
       );

src/components/uploadPageComponent.js

 import React, { PureComponent } from 'react';
 import {
   View,
-  Stylesheet,
+  StyleSheet,
   Text,
   TouchableOpacity,
   Dimensions,
   Image,
+  Platform,
+  ScrollView,
 } from 'react-native';
 import TagInput from 'react-native-tag-input';
 import { InputItem } from 'antd-mobile';
+import { futch } from '../utils/polyfill';
+import { getToken } from '../utils/auth';
+import { encrypt } from '../utils/helper';
+import config from '../utils/config';
+import { userApi } from '../services/interfaces';
+import { errors } from '../utils/error';
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  view_header_container: {
+    height: 56,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text_right_title: {
+    color: '#000',
+    position: 'absolute',
+    right: 16,
+  },
+  text_left_title: {
+    color: '#000',
+    position: 'absolute',
+    left: 16,
+  },
+  text_title: {
+    color: '#000',
+    fontSize: 18,
+  },
+  // uploadImage: {
+  //   height: Dimensions.get('window').height,
+  //   width: Dimensions.get('window').width,
+  // },
+});
+const inputProps = {
+  keyboardType: 'default',
+  placeholder: '如：身份证',
+  autoFocus: true,
+  style: {
+    fontSize: 14,
+    marginVertical: Platform.OS === 'ios' ? 10 : -2,
+  },
+};
 class UploadPageComponent extends PureComponent {
+  constructor(props) {
+    console.info('未过滤之前');
+    console.info(props);
+    super(props);
+    console.info('过滤之后');
+    console.info(props);
+    const { imageURI } = this.props.navigation.state.params;
+    this.state = {
+      imageURI,
+      tags: ['身份证', '红本', '绿本'],
+      text: '',
+      imageName: '',
+    };
+  }
+
+  onChangeTags = (tags) => {
+    this.setState({ tags });
+  };
+  onChangeText = (text) => {
+    this.setState({ text });
+
+    const lastTyped = text.charAt(text.length - 1);
+    const parseWhen = [',', ' ', ';', '\n'];
+
+    if (parseWhen.indexOf(lastTyped) > -1) {
+      this.setState({
+        tags: [...this.state.tags, this.state.text],
+        text: '',
+      });
+    }
+  };
+
   onCancel = () => {
     this.props.onCancel();
   };
   onUploadPhoto = () => {
-    this.props.onUploadPhoto();
+    let token;
+    getToken().then((Apptoken) => {
+      if (!Apptoken) {
+        return Promise.reject(errors.tokenMissing());
+      }
+      token = encrypt(Apptoken);
+      const uri = `${config.apiContextPath}/resource/${token}`;
+      const formData = new global.FormData();
+      const file = { uri: this.state.imageURI, type: 'image/jpg', name: this.state.imageName !== '' ? this.state.imageName : this.state.imageURI.split('/')[this.state.imageURI.split('/').length - 1] };
+
+      formData.append('file', file);
+      console.info(formData);
+      futch(uri, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        body: formData,
+      }, (progressEvent) => {
+        const progress = progressEvent.loaded / progressEvent.total;
+      })
+        .then(request => request.responseText)// response.text())
+        .then((responseData) => {
+          const response = JSON.parse(responseData);
+          if (response.errorCode === 0) {
+            const name = 'addTags';// 添加标签
+            const PicUri = `${config.apiContextPath}/api/interface/user/${name}/invoke`;
+            console.info(PicUri);
+            const postjson = { uri: response.data[0], tags: ['当事人信息', '当事人信息'] };
+            console.info(JSON.stringify(postjson));
+            userApi.invokeInterface(name, postjson)
+            // futch(PicUri, {
+            //   method: 'POST',
+            //   headers: {
+            //     'Content-Type': 'application/json',
+            //   },
+            //   body: JSON.stringify(postjson),
+            // }, (progressEvent) => {
+            //   console.info(progressEvent);
+            // })
+              .then(request => console.info(request));// response.text())
+            // 这里需要调用接口，对图片数据进行绑定，等待完善
+            // 页面跳转，跳转到前面的详情的页面
+            console.info('跳转');
+            this.props.navigation.navigate('DSRInfoDetail', this.props.navigation.state.params.pID);
+          }
+        })
+        .catch((error) => {
+          console.info(error);
+        });
+    });
   };
+  setImageName = (val) => {
+    this.setState({ imageName: val });
+  }
+  labelExtractor = tag => tag;
   renderHeaderMenu() {
     return (
-      <View style={[styles.view_header_container, { backgroundColor: this.props.bgColor }]}>
+      <View style={[styles.view_header_container, { backgroundColor: 'lightgray' }]}>
         <TouchableOpacity
-          onPress={this.onCancel()}
+          onPress={this.onCancel}
         >
           <Text style={[styles.text_title, { color: this.props.titleColor }]}>取消</Text>
         </TouchableOpacity>
         <Text style={[styles.text_title, { color: this.props.titleColor }]}>传照片</Text>
         <TouchableOpacity
-          onPress={this.onUploadPhoto()}
+          onPress={this.onUploadPhoto}
         >
           <Text style={styles.text_right_title}>
             上传
@@ -37,59 +169,40 @@ class UploadPageComponent extends PureComponent {
     );
   }
   render() {
-    const { getFieldProps, getFieldError } = this.props.form;
     return (
       <View style={styles.container}>
         {this.renderHeaderMenu()}
-        <Image
-          style={{ height: Dimensions.get('window').height, width: Dimensions.get('window').width }}
-          source={{ uri: this.props.imageURI, isStatic: true }}
-        />
-        <InputItem
-          {...getFieldProps('account', {
-            initialValue: 'little ant',
-            rules: [
-              { required: true, message: '名称不能为空' },
-            ],
-          })}
-          clear
-          error={!!getFieldError('account')}
-          placeholder="请输入名字"
-        >照片名称
-        </InputItem>
+        <ScrollView>
+          <Image
+            style={{ height: 80, width: 80 }}
+            source={{ uri: this.state.imageURI, isStatic: true }}
+          />
+          <InputItem
+            placeholder="如：张三"
+            data-seed="logId"
+            onChange={this.setImageName}
+          >照片名称
+          </InputItem>
+          <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: 'lightgray' }}>
+            <Text>类型</Text>
+            <TagInput
+              value={this.state.tags}
+              onChange={this.onChangeTags}
+              labelExtractor={this.labelExtractor}
+              text={this.state.text}
+              onChangeText={this.onChangeText}
+              tagColor="blue"
+              tagTextColor="white"
+              inputProps={inputProps}
+              maxHeight={75}
+            />
+          </View>
+        </ScrollView>
       </View>
     );
   }
 }
-const styles = Stylesheet.create({
-  container: {
-    flex: 1,
-  },
-  view_header_container: {
-    height: 56,
-    backgroundColor: 'white',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  text_right_title: {
-    color: '#000',
-    position: 'absolute',
-    right: 16,
-  },
-  text_left_title: {
-    color: '#000',
-    position: 'absolute',
-    left: 16,
-  },
-  text_title: {
-    color: '#000',
-    fontSize: 18,
-  },
-  uploadImage: {
-    height: Dimensions.get('window').height,
-    width: Dimensions.get('window').width,
-  },
-});
+
 
 export default UploadPageComponent;
 

src/routes/main/dangshireninfo/index.js

@@ -2,6 +2,7 @@ import { StackNavigator } from 'react-navigation';
 import DSRInfoScreen from './DSRInfoScreeen';
 import DSRInfoDetailScreen from './DSRInfoDetailScreen';
 import FileViewList from './fileViewList';
+import UploadPageComponent from '../../../components/uploadPageComponent';
 
 const DSRErJiScreen = StackNavigator(
   {
@@ -14,6 +15,9 @@ const DSRErJiScreen = StackNavigator(
     DSRInfoFileView: {
       screen: FileViewList,
     },
+    DSRInfoTuPian: {
+      screen: UploadPageComponent,
+    },
   },
   {
     headerMode: 'none',

src/utils/config.js

@@ -32,7 +32,7 @@ const config = {
   contextPath: '',
   updateContextPath: 'http://192.168.1.22:8080/app',
   // apiContextPath: 'http://14.21.68.149:9089/test',
-  apiContextPath: 'http://192.168.1.22:8080/bm',
+  apiContextPath: 'http://192.168.1.22:8080/sz',
   defaultDateFormat,
   defaultTimeFormat,
   defaultDateTimeFormat,