继React Native 0.60后React Native将自带的webview剔除，推荐使用react-native-webview
喜欢给个赞。蟹蟹~
功能：
通过H5的input type="file" 选择手机图片 上传到服务器 RN响应上传结果提示（成功 失败）
实现步骤：
1，WebView在H5加载完后（onLoad回调）向H5发送上传图片需要的字段，比如token id 等等
2，H5点击上传按钮 选择手机文件，如果选择的类型不是图片，向rn发送数据 1009（表示选择的不是图片类型），rn接收后判断状态码做出对应提示
3，如果选择的是图片，H5将选择的图片和来自RN的token id等字段 异步发送到服务器,
后台返回数据，H5将数据发送给RN RN通过H5发来的数据里面的code来判断是否上传成功，做出对应提示
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<style type="text/css">
body,
html {
background-color: #ffffff;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.m {
width: 100%;
background-color: #fef5f4;
height: 50px;
margin-left: auto;
margin-right: auto;
line-height: 40px;
/* padding-left: 15px; */
/* margin-top: 100px; */
}
.video-js .vjs-fullscreen-control {
display: none;
}
.vjs-big-play-button {
display: none !important;
}
.left_word {
display: inline-block;
margin-left: 15px;
}
.right_btn {
display: inline-block;
position: absolute;
right: 15px;
height: 40px;
/* background-color: red; */
top: 5px
}
.file {
position: relative;
display: inline-block;
background: #3b8bfd;
/* border: 1px solid #99D3F5; */
border-radius: 4px;
padding: 5px 6px;
overflow: hidden;
color: #ffffff;
text-decoration: none;
text-indent: 0;
font-size: 15px;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
/* .file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
} */
</style>
</head>
<body>
<div class="m">
<div class="left_word">
拍照
</div>
<div class="right_btn">
<a href="javascript:;" class="file">上传
<input type="file" name="slice" id="slice" accept="image/*" capture="camcorder">
</a>
</div>
</div>
<script src="./js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
window.document.addEventListener('message', function (RnData) {
// alert(RnData.data)
$("#slice").change(function (event) {
var file = $("#slice")[0].files[0];
var filename = file.name
console.log(file)
var rnData = JSON.parse(RnData.data)
if (file.type.split("/")[0] != "image") {
var type = 1009
//选择的文件类型不是图片向RN发送状态码1009 rn判断是1009就提示不支持此格式
window.ReactNativeWebView.postMessage(JSON.stringify(type))
} else {
PostFile(file, filename, rnData);
}
});
// message = msg.data;
});
}
//上传图片
function PostFile(file, filename, rnData) {
/* 构建form表单进行提交 */
var form = new FormData();
form.append("video", file)
form.append("token", rnData.token)
form.append("id", rnData.id)
form.append("filename", filename)
//
$.ajax({
url: "http://XXX.XX.XXX/index.php/app/app/mission_upimg",
type: "POST",
data: form,
//timeout:"10000", //超时10秒
async: true, //异步
dataType: "json",
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Type
success: function (msg) {
console.log(msg);
//向RN发送后端返回的数据Rn通过code做出对应反馈
window.ReactNativeWebView.postMessage(JSON.stringify(msg))
}
})
}
</script>
</body>
</html>
React Native
<WebView
//接收H5 发送过来的信息 比如 上传后 后端返回的数据
onMessage={(event) => {
if (event.nativeEvent.data) {
const res = JSON.parse(event.nativeEvent.data)
//接收h5返回的1009状态码 rn做出对应的提示
if (res === 1009) {
Alert.alert('', "不支持此格式", res.msg,
[
{ text: '好的' },
], { cancelable: false })
} else {
if (res.code === 0) {
ToastAndroid.show('图片上传成功', 4000);
const newListDatas = listData
newListDatas.imglist.unshift({ url: res.data.url })
this.setState({
listData: newListDatas
})
} else {
Alert.alert('上传失败', res.msg,
[
{ text: '好的' },
], { cancelable: false })
}
}
}
}}
mediaPlaybackRequiresUserAction={false}
onLoad={() => {
var data = { token: store.getState().token, id: rwid }
//h5加载完后 向H5发送一些上传图片需要的其它字段比如token id等等
this.refs.webView.postMessage(JSON.stringify(data));
}}
ref='webView'
allowFileAccess={true}//是否允许访问系统文件
startInLoadingState={true}
scalesPageToFit={true}
scrollEnabled={false}
allowsInlineMediaPlayback={true}
allowsFullscreenVideo={true}
originWhitelist={['*']}
style={{ width: width, height: 40, backgroundColor: "#ffffff", overflow: "hidden", }}
source={{ uri: "file:///android_asset/upImageh5/new_file.html" }}
/>
版本号：
"react-native": "0.59.8",
"react-native-webview": "^5.8.0",
网友评论