uniapp webview 直接调用原生摄像头拍照 拍视频 img video,通过ajax获取blob(file为特殊的blob)对象并上传到后端服务器

web-view中通过plus方法调用摄像头拍照或者拍视频并上传后端的操作步骤如下:

  1. plus.camera.getCamera()获取摄像头对象 cmr
  2. cmr.captureImage(callback)\ cmr.startVideoCapture(callback)获得临时资源的临时路径 path
  3. plus.io.resolveLocalFileSystemURL(‘路径path’,callback) 通过临时路径获得文件对象 entry
  4. entry.toRemoteURL() 获得网络路径
  5. 通过ajax,设置responseType为blob,获取文件的blob对象,根据后端接口要求进行处理并上传
  6. 例子中的后端接口要求表单数据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 即可

最后修改:2023 年 02 月 15 日
如果觉得我的文章对你有用,请随意赞赏o(* ̄▽ ̄*)ブ