Skip to content

Z
zhu_wap_bridge
Commit d0399f87 authored by westzmg's avatar westzmg
Browse files
Options

添加图片相关的接口

parent 1bf76ecb
Show whitespace changes
Inline Side-by-side
Showing with 263 additions and 2 deletions
.umirc.js
View file @ d0399f87
......@@ -29,5 +29,6 @@ export default {
{ path: '/launchFingerSign', component: '../pages/launchFingerSign' },
{ path: '/launchShare', component: '../pages/launchShare' },
{ path: '/getToken', component: '../pages/getToken' },
{ path: '/uploadImage', component: '../pages/uploadImage' },
]
}
components/_Bridge.js
View file @ d0399f87
......@@ -43,7 +43,6 @@ export const isNative = () => {
export const takePhoto = async (opt) => {
return new Promise(async (resolve) => {
// invoke.define('takePhoto', async (data) => {resolve(data)});
alert("adsfasdfasdf");
invoke.define('takePhotoCompleted', async (result) => {resolve(result)});
await invoke.bind("takePhoto")(opt)
})
......@@ -159,6 +158,130 @@ export const getToken = async () => {
})
};
export const previewImage = async (opt) => {
return new Promise(async (resolve) => {
await invoke.bind("previewImage")(opt)
})
};
/*
* 获取上传图片以及文件的token
* options: {
* id, --必输项，如果是项目级应用则设置project_id,否则设置user_id
* app_id="common", --逻辑必输项，设置为应用的code，如果没有设置系统默认为common，
* signature=true, --是否需要签名访问
* rename=true, --文件是否重命名
* maxSize=1024*1024*10 --文件尺寸限制，默认为10M
* }
*/
export const getUpToken = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('getUpTokenCompleted', async (result) => {resolve(result)});
await invoke.bind("getUpToken")(opt)
})
};
/*
* @name uploadImage 上传图片
* options {
* token: object, --从getUpToken中获取
* photo: object, --选择或拍照的结果，主要会用到fileName,type,fileName，多数情况直接拿结果直接用就行了
* onProgress: func, --图片上传的进度回调
* }
*/
export const uploadImage = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('uploadImageCompleted', async (result) => {resolve(result)});
await invoke.bind("uploadImage")(opt)
})
};
/*
* @name uploadImageThrough 图片直传，获取token和上传操作合并
* options {
* photo: object, --选择或拍照的结果，主要会用到fileName,type,fileName，多数情况直接拿结果直接用就行了
* tokenMode: string, --必输项，project or user
* appId: string, --所属的app代码，默认为common
* signature: false, --是否需要签名上传
* rename=true, --是否重命名
* maxSize=1024*10000 --最大尺寸
* }
*/
export const uploadImageThrough = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('uploadImageThroughCompleted', async (result) => {resolve(result)});
await invoke.bind("uploadImageThrough")(opt)
})
};
/*
* @name takePhotoAndUpload 拍照后直接上传
* options {
* quality: 0.6,
* includeBase64: true,
* saveToPhotos: false,
* uploadOptions: {
* tokenMode: string, --必输项，project or user，默认为project
* appId: string, --所属的app代码，默认为common
* signature: false, --是否需要签名上传
* } --图片上传的options
* }
*/
export const takePhotoAndUpload = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('takePhotoAndUploadCompleted', async (result) => {resolve(result)});
await invoke.bind("takePhotoAndUpload")(opt)
})
};
/*
* @name choosePhotoAndUpload 选择文件后上传
* options {
* includeBase64: false,
* uploadOptions: {
* tokenMode: string, --必输项，project or user
* appId: string, --所属的app代码，默认为common
* signature: false, --是否需要签名上传
* } --图片上传的options
* }
*/
export const choosePhotoAndUpload = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('choosePhotoAndUploadCompleted', async (result) => {resolve(result)});
await invoke.bind("choosePhotoAndUpload")(opt)
})
};
/*
* @name getPhotoAndUpload 拍照或选择文件后上传
* options {
* sourceType --['album', 'camera']相册选择和摄像头的选择，可二者同时
* takeOptions: {
* quality: 0.6,
* includeBase64: true,
* saveToPhotos: false,
* } --拍照的options，无特殊情况几乎不用设置
* chooseOptions:{
* includeBase64: true,
* } --拍照的options，无特殊情况几乎不用设置
* uploadOptions: {
* tokenMode: string, --归类方式 project or user，默认project
* appId: string, --所属的app代码，默认为common，建议输入
* signature: true, --是否需要签名上传，默认为true
* } --图片上传的options
* }
*/
export const getPhotoAndUpload = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('getPhotoAndUploadCompleted', async (result) => {resolve(result)});
await invoke.bind("getPhotoAndUpload")(opt)
})
};
export const EVENTS_TYPE = {
keyboardWillShow: 'keyboardWillShow', // 键盘即将出现
keyboardDidShow: 'keyboardDidShow', // 键盘已经出现
......@@ -180,6 +303,14 @@ export default {
launchFingerSign,
launchShare,
getToken,
previewImage,
getUpToken,
uploadImage,
uploadImageThrough,
takePhotoAndUpload,
choosePhotoAndUpload,
getPhotoAndUpload,
}
pages/index.js
View file @ d0399f87
......@@ -43,6 +43,10 @@ export default class extends React.Component {
<Button style={{marginBottom: 20}}>社交应用分享</Button>
</Link>
<Link to={`/uploadImage`}>
<Button style={{marginBottom: 20}}>图片上传相关</Button>
</Link>
<Link to={`/openWindow`}>
<Button style={{marginBottom: 20}}>打开WebView</Button>
</Link>
......
pages/takePicture.js
View file @ d0399f87
......@@ -36,7 +36,9 @@ export default class extends React.Component {
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
await this.doFunc({
includeBase64: true
});
}}
>拍摄照片</Button>
......
pages/uploadImage.js 0 → 100644
View file @ d0399f87
import React from 'react'
import _ from 'lodash'
import {Button, Toast} from "antd-mobile";
import {_Bridge} from "../components"
import {InputItem} from "antd-mobile";
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null,
message: null,
imageUrl: "https://p1-tt.byteimg.com/origin/pgc-image/1e28ce7b3eae4f97bf7e140897833cc6?from=pc"
}
}
render() {
return (
<div>
<h1 style={{textAlign: "center"}}>图片上传相关</h1>
<div style={{padding: 20}}>
<div>
<img
src={this.state.imageUrl}
alt=""
style={{height: 200, width: "100%"}}
onClick={async ()=>{
await _Bridge.previewImage({
images: [this.state.imageUrl],
})
}}
/>
</div>
<div style={{height :20}} />
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
Toast.loading("获取upToken");
try {
const result = await _Bridge.getUpToken({
id: "project_id_project_id_project_id",
app_id: "person",
});
this.setState({result: JSON.stringify(result)})
} catch (e) {
this.setState({result: JSON.stringify(e)})
} finally {
Toast.hide()
}
}}
>获取upToken</Button>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
try {
const resp = await _Bridge.takePhotoAndUpload({
appId: "test"
});
this.setState({
imageUrl: _.get(resp, 'data.url'),
result: JSON.stringify(resp)
})
} catch (e) {
this.setState({result: JSON.stringify(e)})
}
}}
>拍照直传</Button>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
try {
const resp = await _Bridge.choosePhotoAndUpload({
appId: "test"
});
this.setState({
imageUrl: _.get(resp, 'data.url'),
result: JSON.stringify(resp)
})
} catch (e) {
this.setState({result: JSON.stringify(e)})
}
}}
>相册直传</Button>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
try {
const resp = await _Bridge.getPhotoAndUpload({
appId: "test"
});
this.setState({
imageUrl: _.get(resp, 'data.url'),
result: JSON.stringify(resp)
})
} catch (e) {
this.setState({result: JSON.stringify(e)})
}
}}
>多选直传</Button>
{
this.state.result?(
<React.Fragment>
<p>结果</p>
<p>{this.state.result}</p>
</React.Fragment>
):(
<p>空</p>
)
}
</div>
</div>
);
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment