uniapp webview 直接调用原生摄像头拍照 拍视频 img video,通过ajax获取blob(file为特殊的blob)对象并上传到后端服务器
let cmr = plus.camera.getCamera() //获取相机对象cmr.captureImage(//调用拍照方法,获得临时路径function (p) {plus.io.resolveLocalFileSystemURL(p, function (entry) {//通过临时路径,获得文件系统中的文件对象entryentry.file(functi
·
web-view中通过plus方法调用摄像头拍照或者拍视频并上传后端的操作步骤如下
- plus.camera.getCamera()获取摄像头对象 cmr
- cmr.captureImage(callback)\ cmr.startVideoCapture(callback)获得临时资源的临时路径 path、
- plus.io.resolveLocalFileSystemURL(‘路径path’,callback) 通过临时路径获得文件对象 entry
- entry.toRemoteURL() 获得网络路径
- 通过ajax,设置responseType为blob,获取文件的blob对象,根据后端接口要求进行处理并上传
- 例子中的后端接口要求表单数据formData的形式上传
附上htm5文档地址http://www.html5plus.org/doc/zh_cn/io.html#plus.io.DirectoryEntry.toRemoteURL
以图片为例,代码如下,
let cmr = plus.camera.getCamera() //获取相机对象
cmr.captureImage(
//调用拍照方法,获得临时路径
function (p) {
plus.io.resolveLocalFileSystemURL(p, function (entry) {
//通过临时路径,获得文件系统中的文件对象entry
entry.file(function (file) {
// 可通过entry对象的file方法,获取文件数据对象(该文件数据对象仍无法直接使用)
axios({
method: 'get',
url: entry.toRemoteURL(),
responseType: 'blob',
}).then(res => {
let blob = res.data
const uploadFile = new FormData()
uploadFile.append('file', blob )
axios({
method: 'post',
url: '/file/api/Upload',
headers: { 'Content-Type': 'multipart/form-data'},
data: uploadFile,
})
})
file.close()
})
})
},
function (error) {
console.log('---' + 'Capture image failed: ' + error.message)
},
)
视频相同,将captureImage换成startVideoCapture即可
更多推荐
已为社区贡献3条内容
所有评论(0)