react-native-image-picker 实现文件上传

• 17

• 18

• 19

• 20

• 21

• 22

• 23

• 24

• 25

• 26

• 27

• 28

• 29

• 30

• 31

• 32

• 33

• 34

• 35

• 36

• 37

• 38

• 39

• 40

• 41

• 42

• 43

• 44

• 45

• 46

• 47

• 48

• 49

• 50

• 51

• 52

• 53

• 54

• 55

• 56

• 57

• 58

• 59

• 60

• 61

• 62

• 63

• 64

• 65

• 66

• 67

• 68

• 69

• 70

• 71

• 72

• 73

• 74

• 75

• 76

• 77

• 78

• 79

• 80

• 81

• 82

• 83

• 84

• 85

• 86

• 87

• 88

• 89

• 90

• 91

• 92

• 93

• 94

• 95

• 96

• 97

• 98

• 99

• 100

• 101

• 102

• 103

• 104

• 105

• 106

• 107

• 108

• 109

• 110

• 111

• 112

• 113

• 114

• 115

• 116

• 117

• 118

• 119

• 120

• 121

• 122

• 123

• 124

• 125

• 126

• 127

• 128

• 129

• 130

• 131

• 132

• 133

• 134

然后在需要使用的地方引入。

import CameraButton from '../../component/huar/cameraButton' <CameraButton style={styles.cameraBtn} photos={[]} onFileUpload={this.onFileUpload} /> 点击上传事件： onFileUpload(file, fileName){ return this.props.uploadAvatar({ id: this.props.user.ID, type:'logo', obj:'user', corpId: this.props.cropId }, file, fileName)｝ Action请求代码： function actions(dispatch) { return { fileUrl,fileName)=>dispatch(Actions.uploadAvatar(params, fileUrl,fileName)) } }

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

• 20

actions中的uploadAvatar函数如下。

function uploadAvatar(params, fileUrl, fileName) { return dispatch=> { return UserService.uploadImage(params, fileUrl, fileName) .then(result=> { dispatch({ type: UPDATE_AVATAR, path: result.path }) return result }) } } //UserService.uploadImage代码如下 export function uploadImage(params, fileUrl,fileName) { return http.uploadFile(`${config.UploadImage}`, params, fileUrl,fileName) }

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

UserService函数的http异步上传图片代码如下：

let queryString = require('query-string'); import Storage from './storage' import { Platform } from 'react-native' const os = Platform.OS; async function uploadFile(url, params, fileUrl,fileName) { let Access_Token = await Storage.getItem('Access_Token'); let data = new FormData(); data.append('file', { uri: fileUrl, name: fileName, type: 'image/jpeg' }); Object.keys(params).forEach((key)=> { if (params[key] instanceof Date) { data.append(key, value.toISOString()) } else { data.append(key, String(params[key])) } }); const fetchOptions = { method: 'POST', headers: { 'Accept': 'application/json', 'Access_Token': Access_Token ? Access_Token : '', 'UserAgent':os }, body: data }; return fetch(url, fetchOptions) .then(checkStatus) .then(parseJSON) }

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

• 20

• 21

• 22

• 23

• 24

• 25

• 26

• 27

• 28

• 29

• 30

• 31

• 32

• 33

• 34

• 35

• 36

• 37

• 38

• 39

• 40

• 41

封装上传

如果上面的实现看的比较复杂，那么我们做如下的封装：

let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token function uploadImage(url,params){ return new Promise(function (resolve, reject) { let formData = new FormData(); for (var key in params){ formData.append(key, params[key]); } let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'}; formData.append("file", file); fetch(common_url + url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data;charset=utf-8', "x-access-token": token, }, body: formData, }).then((response) => response.json()) .then((responseData)=> { console.log('uploadImage', responseData); resolve(responseData); }) .catch((err)=> { console.log('err', err); reject(err); }); }); }

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

• 20

• 21

• 22

• 23

• 24

• 25

• 26

• 27

• 28

• 29

然后在使用的地方：

最后

针对于上面的问题，我总结出了互联网公司Android程序员面试涉及到的绝大部分面试题及答案，并整理做成了文档，以及系统的进阶学习视频资料。
（包括Java在Android开发中应用、APP框架知识体系、高级UI、全方位性能调优，NDK开发，音视频技术，人工智能技术，跨平台技术等技术资料），希望能帮助到你面试前的复习，且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

• 13

• 14

• 15

• 16

• 17

• 18

• 19

• 20

• 21

• 22

• 23

• 24

• 25

• 26

• 27

• 28

• 29

然后在使用的地方：

最后

针对于上面的问题，我总结出了互联网公司Android程序员面试涉及到的绝大部分面试题及答案，并整理做成了文档，以及系统的进阶学习视频资料。
（包括Java在Android开发中应用、APP框架知识体系、高级UI、全方位性能调优，NDK开发，音视频技术，人工智能技术，跨平台技术等技术资料），希望能帮助到你面试前的复习，且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。

[外链图片转存中…(img-bHyJqQo5-1715590901740)]

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！