更新时间:2019-01-14 16:37
用户自选调用相机拍照或者直接从相册选择照片,得到照片后可以指定是否自动上传照片。需要native方实现上传协议。
注意:在 iOS 11 中,要求客户端添加一个新的权限描述 NSPhotoLibraryAddUsageDescription
,才允许访问相册。
示例代码如下所示:
var photoLocalPath; // 保存本地文件的路径。
var params = {
type: '0',
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
var uploadParams = {
// 需要上传的照片的路径
path: e.localPath
};
setTimeout(function() {
window.WindVane.call('WVCamera', 'confirmUploadPhoto', uploadParams, function(e) {
alert('upload success: ' + JSON.stringify(e));
}, function(e) {
alert('upload failure: ' + JSON.stringify(e));
});
}, 20);
}, function(e) {
alert('takePhoto failure: ' + JSON.stringify(e));
});
输入参数自定义
回调参数
回调参数将会在回调方法中传递,如果成功获取照片,则进入 success
回调;如果失败或被用户取消,则进入 failure
回调。
成功回调参数:
string
] url - 访问 URL,页面将此 URL 填写给 img
的 src
属性,用于进行照片的预览。 注意:该 URL 非真实的 CDN URL,浏览器无法访问。string
] localPath - 照片的本地文件路径,该路径可以用于后续的 WVCamera.confirmUploadPhoto 上传过程。string
] resourceURL - 上传到 TFS 后的回传 CDN 地址,该地址可以在浏览器里真实访问。仅当照片被成功上传到 CDN 之后才存在该属性。string
] identifier - 照片标识,当使用 Mtop 上传照片(v = '2.0'
)时,会将输入参数中的 identifier
返回。string
] base64Data - 照片的 Base64 数据,仅当设置了 needBase64 = true
时才有效,实际使用时请注意自行添加 data:image/png;base64,
前缀(VER.WindVane 8.0.0 或更高
)。失败回调参数:
string
] errorType - 错误类型。string
] errorCode - 错误代码。string
] errorMsg - 错误消息。string
] identifier - 照片标识,当使用 Mtop 上传照片(v = '2.0'
)时,会将输入参数中的 identifier
返回。注意:如果用户手动取消了拍照,会进入失败回调,iOS 的参数是 {ret:'HY_RET_PHOTO_CANCLE'}
,Android 的参数是 {ret:'HY_FAILED'}
,没有其它参数。如果没有访问相机/相册的权限,同样会进入失败回调,并且参数都会包含 {msg:'NO_PERMISSION'}
。
监听事件
WVPhoto.Event.takePhotoSuccess 获取照片成功,即将上传,此时 JS 可以在页面上对照片进行预览。
事件参数:
string
] url - 访问 URL,页面将此 URL 填写给 img 的 src 属性,用于进行页面的预览。 注意:该 URL 非真实的 CDN URL,浏览器无法访问。string
] localPath - 本地文件路径,该路径可以用于后续的上传过程。允许同时选择多张照片上传,仅限 WindVane iOS,而且只有从相册选择照片时才能够选择多张,直接拍照时仍会使用上面的单张照片模式,因此建议传入参数 mode: 'photo'
以直接进入相册。
注意:Android 目前只有在手淘中才能使用多图选择模式,而且在VER.手淘 Android 0330
之前,快速滑动时存在线程溢出的 BUG,因此建议从 VER.0330
之后再使用。
输入参数
string
] mutipleSelection - [可选]是否使用多图选择模式,'1'
表示使用多图选择模式,'0'
表示不使用多图选择模式,默认为 '0'
。int
] maxSelect - [可选]多图选择模式下最多选择的照片数,默认为 9
。回调参数
回调参数将会在回调方法中传递,如果成功获取,则进入 success
回调;如果失败或被用户取消,则进入 failure
回调。
成功回调参数:
array
] images - 用户选择的照片数组,每一项包含以下属性:string
] url - 访问 URL,页面将此 URL 填写给 img
的 src
属性,用于进行照片的预览。 注意:该 URL 非真实的 CDN URL,浏览器无法访问。string
] localPath - 照片的本地文件路径,该路径可以用于后续的 WVCamera.confirmUploadPhoto 上传过程。失败回调参数:
string
] errorType - 错误类型。string
] errorCode - 错误代码。string
] errorMsg - 错误消息。string
] identifier - 照片标识,当使用 Mtop 上传照片(v = '2.0'
)时,会将输入参数中的 identifier
返回。注意:如果用户手动取消了拍照,会进入失败回调,iOS 的参数是 {ret:'HY_RET_PHOTO_CANCLE'}
,Android 的参数是 {ret:'HY_FAILED'}
,没有其它参数。如果没有访问相机/相册的权限,同样会进入失败回调,并且参数都会包含 {msg:'NO_PERMISSION'}
。
监听事件
WVPhoto.Event.takePhotoSuccess 获取照片成功,即将上传,此时 JS 可以在页面上对照片进行预览。
事件参数:
string
] url - 访问 URL,页面将此 URL 填写给 img 的 src 属性,用于进行页面的预览。 注意:该 URL 非真实的 CDN URL,浏览器无法访问。string
] localPath - 本地文件路径,该路径可以用于后续的上传过程(仅限 WindVane Android
)。下列两个事件仅当拍照完直接上传才会触发:
WVPhoto.Event.uploadPhotoSuccess 上传照片成功,每上传一张照片成功都会触发此事件。
事件参数:
string
] url - 访问 URL,页面将此 URL 填写给 img
的 src
属性,用于进行照片的预览。 注意:该 URL 非真实的 CDN URL,浏览器无法访问。string
] localPath - 照片的本地文件路径,该路径可以用于后续的 WVCamera.confirmUploadPhoto 上传过程。string
] resourceURL - 上传到 TFS 后的回传 CDN 地址,该地址可以在浏览器里真实访问。仅当照片被成功上传到 CDN 之后才存在该属性。string
] identifier - 照片标识,当使用 Mtop 上传照片(v = '2.0'
)时,会将输入参数中的 identifier
返回。WVPhoto.Event.uploadPhotoFailed 上传照片失败,每上传一张照片失败都会触发此事件。
事件参数:
string
] errorType - 错误类型。string
] errorCode - 错误代码。string
] errorMsg - 错误消息。string
] identifier - 照片标识,当使用 Mtop 上传照片(v = '2.0'
)时,会将输入参数中的 identifier
返回。
document.addEventListener('WVPhoto.Event.uploadPhotoSuccess', function (e) {
alert('event uploadPhotoSuccess: ' + JSON.stringify(e.param));
});
document.addEventListener('WVPhoto.Event.uploadPhotoFailed', function (e) {
alert('event uploadPhotoFailed: ' + JSON.stringify(e.param));
});
var params = {
// 得到照片后是否自动上传
type: '1',
// 是否只允许拍照或从相册选择
mode: 'photo',
// 上传方式
v: '2.0',
// 业务代码
bizCode: 'mtopupload',
// 是否使用多图选择模式
mutipleSelection: '1',
// 多图选择模式下最多选择的照片数
maxSelect: 6
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
alert('takePhoto success: ' + JSON.stringify(e));
}, function(e) {
alert('takePhoto failure: ' + JSON.stringify(e));
});
确认上传照片
输入参数
string
] path - 需要上传的照片的路径,必须为 takePhoto 方法返回的 localPath 字段的值。string
] v - 得到照片后的上传方式,建议总是传入 '2.0'
,表示使用 Mtop 上传(需要设置 bizCode
属性,例如 'mtopupload'
。特别提示:v: '2.0'
不能简写为 v: '2'
),其它上传方式将被废弃。string
] bizCode - 业务代码,用于标识自己的业务点。string
] identifier - [可选]照片标识,用于鉴别每次上传的照片,仅当使用 Mtop 上传照片(v = '2.0'
)时才有效。string
] mode - [可选]是否只允许拍照或从相册选择,'camera'
表示直接拍照,'photo'
表示直接从相册选择,'both'
表示可以由用户自选拍照还是从相册选择。默认为 'both'
(VER.WindVane 5.3.0 或更高
)。boolean
] needLogin - [可选]使用 Mtop 上传照片(v = '2.0'
)时是否要求必须登录才能上传,否则无需登录即可上传照片(VER.WindVane 6.5.0 或更高
,旧版本仍然要求登录,新版本已默认无需登录)。注意:v
、bizCode
和 identifier
这三个参数,WindVane Android 在 VER.6.0.0 或更高
才支持。
注意:上传文件之前需要在 Media Center 申请一个 bizCode 以标识自己的业务点,并易于对本业务的图片进行管理。可以使用通用的 bizCode:mtopupload 用于测试,如果需要申请 bizCode 请联系:逐风,家麒。如果要使用 v=’2.0’ 的上传,还需要将 业务描述、图片大小、图片格式、每天上传多少、图片空间申请的 bizCode 邮件给 @佑明,配置图片上传的通道。
警告:要求尽快切换到 v: '2.0'
的上传方式,其它上传方式由于 https 改造与安全性缘故将被废弃。
回调参数
回调参数将会在回调方法中传递,如果成功获取,则进入 success
回调;如果失败或被用户取消,则进入 failure
回调。
成功回调参数:
string
] localPath - 照片的本地文件路径。string
] resourceURL - 上传到 TFS 后的回传 CDN 地址,该地址可以在浏览器里真实访问。
var params = {
// 需要上传的照片的路径
path: photoLocalPath,
// 上传方式
v: '2.0',
// 业务代码
bizCode: 'mtopupload'
};
window.WindVane.call('WVCamera', 'confirmUploadPhoto', params, function(e) {
alert('success: ' + JSON.stringify(e));
}, function(e) {
alert('failure: ' + JSON.stringify(e));
});
在文档使用中是否遇到以下问题
更多建议
匿名提交