zoukankan      html  css  js  c++  java
  • 微信小程序 上传图片

    上传图片功能应该是现在比较常见的需求了,但是上传的图片大小、压缩、个数限制以及回显点击放大等还是比较麻烦。

    这里我简单以uniapp举例说一下常用的方法以及实现的逻辑

    首先上传图片需要调用chooseImage ,这里需要说一下count ,默认为最多9可以上传9张图

    //最多9张图,this.imgArr为已上传的图片,如果只是1张图的话,可以直接指定count 为1

    let count = 9 - this.imgArr.length;
    uni.chooseImage({
      count,
      sourceType: ['album','camera'],
      sizeType: ['compressed'],
      success(res) {
        if(res.errMsg =='chooseImage:ok'){

          //res.tempFilePaths  为返回的图片数组
          console.log(res.tempFilePaths)
        }
      }
    })

      

    然后需要涉及到给后端传递的数据为什么类型,如果为base64的话,那我们还需对res.tempFilePaths 进行转换

    //使用arrayBufferToBase64,但是部分ios机型不兼容
    uni.request({
        url,
        method:'GET',
        responseType: 'arraybuffer',
        success: ress => {
            let base64 = wx.arrayBufferToBase64(ress.data); 
    	if(type == 'mp4'){
    	    base64=`data:video/mp4;base64,${base64}`
    	}else{
    	    base64=`data:image/jpg;base64,${base64}`
    	}
    	console.log(base64)
        }
    })    
    

      

    兼容解决方案 

    urlTobase64 =(url)=>{
      let type=url.substring(url.lastIndexOf('.')+1)
      if(url.indexOf('.jpg')>0 || url.indexOf('.JPG')>0 || url.indexOf('.PNG')>0 ||         url.indexOf('.png')>0 || url.indexOf('ttp://tmp/')>0 || url.indexOf('xfile://tmp')>0){
        return new Promise((resolve,reject)=>{
            wx.getFileSystemManager().readFile({
    	    filePath:url,
                encoding:'base64',
    	    success:  res=>{
    	        let base64='';
    		if(type == 'mp4'){
    		    base64=`data:video/mp4;base64,${res.data}`
    		}else{
    		    base64=`data:image/jpg;base64,${res.data}`
    		}
    		resolve(base64)
    	  }
       })
      })
     }else{
       return new Promise((resolve,reject)=>{
          uni.request({
    	   url,
    	   method:'GET',
    	   responseType: 'arraybuffer',
    	   success: ress => {
    	     let base64 = wx.arrayBufferToBase64(ress.data); 
    		if(type == 'mp4'){
    		  base64=`data:video/mp4;base64,${base64}`
    		}else{
    		  base64=`data:image/jpg;base64,${base64}`
    		}
    		resolve(base64)
    	   }
          })
        })
      }	
    };               
    

      

      

  • 相关阅读:
    排序
    FileOutputStream文件写入 —— 覆盖、追加
    判断一个地图坐标是否在中国镜内
    地图坐标转换
    全文检索 使用最新lucene3.0.3+最新盘古分词 pangu2.4 .net 实例
    blob转base64位 base64位转blob
    div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器
    DIV 粘贴插入文本或者其他元素后,移动光标到最新处
    project 计划添加编号或 任务分解时为任务添加编号
    修改project任务的默认开始时间
  • 原文地址:https://www.cnblogs.com/sunbaoxu/p/12619597.html
Copyright © 2011-2022 走看看