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

      

      

  • 相关阅读:
    org.dom4j.DocumentException: null Nested exception: null
    严重: 文档无效: 找不到语法。 at (null:2:19)
    微信 群好友 的返回微信号 有阉割
    Perl 面向对象的真正意思
    门外汉怎么成就咨询大单(1)——北漂18年(39)
    Perl 微信模块--Weixin::Client
    Solr使用入门指南
    Perl 对象是函数的第一个参数
    haproxy 4层负载
    mysql 从读负载
  • 原文地址:https://www.cnblogs.com/sunbaoxu/p/12619597.html
Copyright © 2011-2022 走看看