由于业务要求上传证书的功能，即上传图片，做一下笔记；

tool是我自己封装的微信小程序接口，具体实现看微信小程序或Taro官方文档；req开头的函数也是我自己封装的网络请求；不能够直接复制运行。

界面需要三个东西 上传图片的按钮，选择的按钮，以及上传图片后的图片展示。

 //选择图片的按钮
<Image src={btn} mode='widthFix' className='phone-btn' onClick={this.chooseImage} /> 

//图片展示
<Image src={ this.state.tempFilePaths} style={{width:'100%'}} mode='widthFix'/>

//确认上传图片的按钮
<Button onClick={this.uploadFile}>确认上传证书</Button>  

选择图片函数chooseImage

chooseImage = () => {
    Taro.chooseImage({
      count: 1,
      sizeType: ['original','compressed'],
      sourceType: ['album','camera'],
      success: (res) => {
        tool.showInfo('正在上传...','loading')
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        this.setState({
          tempFilePaths: tempFilePaths[0],
        },()=>{
          console.log(tempFilePaths);
        })

      }
    })
  }

上传图片函数uploadFile

 uploadFile=async ()=>{
    let res = await reqUploadCert (this.state.tempFilePaths, 'triCertificate')
    console.log('uploadFile',res)
    let response = JSON.parse(res.data)
    console.log(response);
    if(response.code === 10000){
      console.log('上传成功')
      tool.showInfo('上传成功')
      setTimeout(()=>{
        this.setState({
          showUpload :false,
          tempFilePaths:''
        },()=>{
          this.getCertList()
        })
      },100)
    }else{
      tool.showInfo('上传失败')
    }
  }

当图片上传成功后，我们需要展示在页面上，没上传图片之前，需要留白高度400rpx的View，好看些。

{
   this.state.tempFilePaths ?<Image src={ this.state.tempFilePaths} style={{width:'100%'}} mode='widthFix'/>
   : <View style={{width:'100%',height:'400rpx'}}></View>
}

业务中另外的上传图片功能需要压缩图片，这一块我做了很久，（现在还是不会图片的裁剪，会做时补充上来）

//压缩图片
 chooseWxImage = () => {
     //选择图片
    Taro.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log('选择图片=>', res.tempFilePaths[0])
        Taro.getImageInfo({
          src: res.tempFilePaths[0],
          success: (res) => {
            console.log('getImageInfo=>res', res)
            console.log('getImageInfo=>', res.path)
            let originW = res.width
            let originH = res.height
            //压缩比例
            //最大尺寸限制，这里我不知道为什么规定的320和420无法压缩到对应的值，只好/3试试，发现可以
            let maxW = 320 /3
            let maxH = 420 /3
            //目标尺寸
            let targetW = originW
            let targetH = originH
            if (originW > maxW || originH > maxH) {
              if (originW / originH > maxW / maxH) {
                // 要求宽度*(原生图片比例)=新图片尺寸
                targetW = maxW;
                targetH = Math.round(maxW * (originH / originW));
              } else {
                targetH = maxH;
                targetW = Math.round(maxH * (originW / originH));
              }
            }
            //尝试压缩文件，创建 canvas
            let ctx = Taro.createCanvasContext('firstCanvas');
            ctx.clearRect(0,  0, targetW, targetH);
            console.log(res.path, targetW, targetH)
            ctx.drawImage(res.path, 0, 0, targetW  , targetH );
            ctx.draw();
            //设置canvas的长宽
            this.setState({
              cw: targetW  ,
              ch: targetH
            })
            setTimeout(()=>{
              Taro.canvasToTempFilePath({
                canvasId: 'firstCanvas',
                width:targetW ,
                height : targetH  ,
                success: (res) => {
                  console.log('画布信息=>', res)
                  console.log('画布信息=>', res.tempFilePath)
                  Taro.getImageInfo({
                    src : res.tempFilePath ,
                    success : (res)=>{
                      console.log('压缩后的res',res)
                    }
                  })
                  this.setState({
                    tempFilePaths: res.tempFilePath,
                    hidden: true,
                    isChanged: true
                  })
                  Taro.setStorageSync('userImage',res.tempFilePath)
                }
              })
            },500)
          }
        })
      }
    })
  }

使用Canvas才能得到压缩后的图片

 const style = {height: this.state.ch + 'px', width: this.state.cw + 'px', marginLeft: -this.state.cw / 2 + 'px'}
 
<View style={style} className='hiddenCanvas'>
      <Canvas className='canvas' canvasId="firstCanvas" style={style} />
</View>

.canvas{
  position: absolute;
  top: 0;
  left:50%;
  z-index: -1;
}
.hiddenCanvas{
  position: fixed;
  top: 9999rpx;  //把canvas移出屏幕
}

显示部分与上传图片类似，不赘述，当有底图的情况下，不用留白一个View的位置，直接使用底图即可。

state={
    ...
    tempFilePaths: require('../../../images/apply/background.png'),
} 

<View>
    <Image src={this.state.tempFilePaths} style='width: 100%;' mode='widthFix' className='phone-bgc'/>
</View>