H5+APP混合开发上传图片

1:结合mui框架进行图片上传,plus.nativeUI.actionSheet弹出系统选择按钮框,

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;

              }

          });

      }

2:选择拍照上传或者是从相册选择文件上传

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

              });

      });

  }

3:将url转为file文件格式,结合Promise等待url转化完成再进行上传步骤

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

    }

4:上传服务器

// 调用转换路径的函数

        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()

        })


更多详细的API尽在 H5+APP混合开发API

你可能感兴趣的:(H5+APP混合开发上传图片)