Skip to content

M
manager-app-sz
提交 90163681 authored 作者: 吴强's avatar 吴强
浏览文件
操作

上传界面

上级 804c9bd7
隐藏空白字符变更
内嵌 并排
正在显示 包含 188 行增加 和 54 行删除
package-lock.json
浏览文件 @ 90163681
......@@ -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
浏览文件 @ 90163681
......@@ -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
浏览文件 @ 90163681
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
浏览文件 @ 90163681
......@@ -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
浏览文件 @ 90163681
......@@ -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,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论