添加图片相关的接口

.umirc.js

@@ -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

@@ -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

@@ -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

@@ -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

+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>
+        );
+    }
+};
+