H5调用本地相册相机上传图片

在开发中有时候会用到H5调用本地图片或者相机，像第三方的实名认证，在线客服等等都需要上传图片。H5中只需要通过 <input>调用即可，ios是可以的实现的，不需要自己处理，除非客户端压缩图片，但是Android中需要自己处理，比较坑，本文记录H5调用本地图片或者相机的实现过程以及遇到的问题。

H5主要是通过 input 标签来获取图片

通过 WebView 加载 h5 页面，监听 WebView 对应的方法，实现自己的逻辑。

当点击 input 标签的时候会调用 WebChromeClient 的 onShowFileChooser() 方法（5.0+）或者 openFileChooser() 方法（3.0+）在改方法中处理自己逻辑，这里是d出一个原生的选择框，选择从相册还是拍照获取图片。

拍照和打开相册功能封装到了 PhotoUtils 工具类中了。

file_paths.xml

从相册中选择

onActivityResult() 方法处理

这里使用 Luban 压缩以后再上传的

可以的。

秀米H5添加动图的 *** 作步骤如下：

1、打开秀米进入图文排版；

2、点击“添加新的2、0图文”；

3、点击我的图库，将电脑上的动态图片上传至图库；

4、将图库中的动图拖至右侧即可。

mui.init()

  var page=null

  page={

      imgUp:function(){

          plus.nativeUI.actionSheet({cancel:"取消",buttons:[

              {title:"拍照"},

              {title:"从相册中选择"}

          ]}, function(e){//1 是拍照  2 从相册中选择

              switch(e.index){

                  case 1:appendByCamera()break

                  case 2:appendByGallery()break

              }

          })

      }

function appendByCamera(){

// 拍照上传图片，调用摄像头

      plus.camera.getCamera().captureImage(function(e){

          plus.io.resolveLocalFileSystemURL(e, function(entry) {

        // 将路径转为网络路径进行图片预览

          var path = entry.toRemoteURL()

          document.getElementById('preview').src = path

          $('.previewimage')[0].style.display = 'block'

            $('.imageBox')[0].style.display = 'none'

          }, function(e) {

              mui.toast("读取拍照文件错误：" + e.message)

          })

      })

  }

// 从相册选取文件

function appendByGallery(){

          plus.gallery.pick(function(e){

             // 将本地路径转为相对路径，然后再将相对路径转为网络路径，进行图片的预览

            plus.io.resolveLocalFileSystemURL(plus.io.convertLocalFileSystemURL(e), function(entry) {

              var path = entry.toRemoteURL()

              document.getElementById('preview').src = path

              $('.previewimage')[0].style.display = 'block'

                $('.imageBox')[0].style.display = 'none'

              }, function(e) {

                  mui.toast("读取拍照文件错误：" + e.message)

              })

      })

  }

var ImgList = []

function getfiles() {

        var imageurl = document.getElementById("preview").src

        var p = new Promise(function (resolve, reject) {

            // 将网络路径转为本地的路径，再将本地的路径转为file 

            plus.io.resolveLocalFileSystemURL( plus.io.convertLocalFileSystemURL(imageurl), function( entry ) {

            // 可通过entry对象 *** 作文件

            entry.file( function(file){

                ImgList.push(file)   

                resolve(ImgList[0])

            })

            }, function ( e ) {

                alert( "Resolve file URL failed: " + e.message )

            })

        })

      return p

    }

// 调用转换路径的函数

        getfiles()

    // 等待转化完成进行上传

        .then(res =>{

            //  上传的地址

         // plus.uploader.createUpload('url',{},function(){})  

      // 只能是http://或者是https://开头的地址，{}上传的方式，function(){} 回调函数

            var task = plus.uploader.createUpload( "url",

                { method:"POST"},

                function ( t, status ) {

                    // 上传完成

                    if ( status == 200 ) {

                  // 图片上传完成，可进行下一步的 *** 作

                        alert( "Upload success: " + t.url )

                    } else {

                        alert( "Upload failed: " + status )

                    }

                }

            )

            // 要上传的文件file，也可以是本地路径的

            task.addFile( res, {key:"img"} )  //类似fromData.append('img',document.getElementById('submitImage').files[0])

            // 加上文件上传的其他参数

            task.addData( "task_id", taskID )

            // 设置请求头，若服务器需要校验请求头

            task.setRequestHeader("Authorization",localStorage.getItem('mytoken'))

            //task.addEventListener( "statechanged", onStateChanged, false )

            // 开始上传

            task.start()

        })

---