zoukankan      html  css  js  c++  java
  • h5+app gallery 获取手机相册图片并上传,最后在把网络图片转码为base64

          // 点击选择手机相册图片(我这点用的是多选) 详情见 http://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GallerySuccessCallback
        btn_img(){
    var lfs = null plus.gallery.pick((e) => { for(var i in e.files){ lfs=e.files;
                //根据拿到的图片地址上传到服务器
    this.fileUploader(lfs[i]) } }, function ( e ) { console.log( "取消选择图片" ); },{filter:"image",multiple:true,selected:lfs,maximum:3,system:false});// 最多选择3张图片 ,这个配置也参见上面的详情 },


      
      //上传到服务器 详情见 http://www.html5plus.org/doc/zh_cn/uploader.html#plus.uploader.createUpload
         async fileUploader(filePath){
            // 获取token 
            let token = '我的token参数';
        
            return await new Promise((resolve, reject) => {
                console.log("开始上传!")
           // token 我上传时需要的参数
           // localStorage.upload_url + "api/post/file  要上传的服务器地址
                let task = plus.uploader.createUpload(localStorage.upload_url + "api/post/file?token=" + token
                  { method:"POST",blocksize:204800,priority:100 },
                  ( t, status ) => {
                    // 上传完成
                    if(status == 200){
                      let responseTextJson = JSON.parse(t.responseText);
                      if(responseTextJson && responseTextJson.errorCode == 200 && responseTextJson.errorMessage == 'SUCCESS'){
                          console.log(responseTextJson,'请求成功返回的信息')
                        resolve(responseTextJson) //抛出结果,使用在最下面
                      }else{
                       console.log("服务错误,请稍后在试!")
                      }
                    }else{
                      console.log(JSON.stringify(t))
                      console.log("网络错误,请稍后在试!")
                    }
                  }
                );
           //添加上传文件
           // filePath 上传文件的路径(仅支持本地文件路径)详情见 http://www.html5plus.org/doc/zh_cn/uploader.html#plus.uploader.Upload.addFile
     
                task.addFile(filePath, {key: "file"} );
                // 开始上传
                task.start();
              }
            ).then(
              // 成功,这里就是上面抛出的结果
              (res) => {
                if(res.errorCode === 200){
                    console.log('返回的文件路径',res.result);
              var url = res.result
              //将网络图片转码为base64
                     this.getBase64(url).then((base64) => {
                        //得到转码后的结果
                console.log(base64)
                     },function(err){
                         console.log(err);//打印异常信息
                    });  
                }else{
                   console.log('发送失败!');
                }
              },
              // 失败
              (err) => {
                console.log(err);
                alter(err);
              }
            )
          },
     
     
       
       getBase64(img){
            function getBase64Image(img,width,height) {//width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
              var canvas = document.createElement("canvas");
              canvas.width = width ? width : img.width;
              canvas.height = height ? height : img.height;
     
              var ctx = canvas.getContext("2d");
              ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
              var dataURL = canvas.toDataURL();
              return dataURL;
            }
            var image = new Image();
            image.crossOrigin = '';
            image.src = img;
            var deferred=$.Deferred();
            if(img){
              image.onload =function (){
                deferred.resolve(getBase64Image(image));//将base64传给done上传处理
              }
              return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
            }
          },
  • 相关阅读:
    开源blog搬家工具
    嵌入式语言Lua
    ChangeMan Version Manager Workstation 8.1 command line quick check in/out
    Mssql合并列值(三个关系表合并)
    心得——学习中做笔记应该做到哪
    MFC Dialog 透明渐变
    【转】SSDT&Shadow Hook的实现,完整代码。可编译
    ssdt 表结构及hook的一般理解
    <转>ssdt hook 源码
    【转】_declspec(naked) 使用
  • 原文地址:https://www.cnblogs.com/tlfe/p/13152820.html
Copyright © 2011-2022 走看看