[移动开发]微信小程序调用相机和相册保存到后端

wxml代码:这里使用vant方便写样式;

<van-cell>
              <view icon="user-circle-o"
                style="font-size:small;font-weight:bold;color: #323233; float: left;margin-top: 20px;">上传人脸照</view>
              <view class='avatar'>
                <image bindtap='buttonclick' src="{{tempFilePaths}}" />
              </view>
            </van-cell>

点击调用js里的方法:

//图片点击处理事件，使用wx.showActionSheet()调用菜单栏
  buttonclick: function () {
    const that = this
    wx.showActionSheet({
      itemList: ['拍照', '相册'],
      itemColor: '',
      //成功时回调
      success: function (res) {
        if (!res.cancel) {
          /*
           res.tapIndex返回用户点击的按钮序号，从上到下的顺序，从0开始
           比如用户点击本例中的拍照就返回0，相册就返回1
           我们res.tapIndex的值传给chooseImage()
          */
          that.chooseImage(res.tapIndex)
        }
      },
      //失败时回调
      fail: function (res) {
        console.log('调用失败')
      },
      complete: function (res) {},
    })
  },

?选择完成图片后调用的方法:

chooseImage(tapIndex) {
    const checkeddata = true
    const that = this
    wx.chooseImage({
      //count表示一次可以选择多少照片
      count: 1,
      //sizeType所选的图片的尺寸，original原图，compressed压缩图
      sizeType: ['original', 'compressed'],
      //如果sourceType为camera则调用摄像头，为album时调用相册
      sourceType: [that.data.sourceType[tapIndex]],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        //将选择到的图片缓存到本地storage中
        wx.setStorageSync('tempFilePaths', tempFilePaths)
        /*
          由于在我们选择图片后图片只是保存到storage中，所以我们需要调用一次
          setHeader()方法来使页面上的头像更新
          */
        that.setHeader();
        console.log(that.data.sourceType[tapIndex])
        /* if('camera'==that.data.sourceType[tapIndex].toString()){
          that.takePhoto();
        }else{ */
        that.transformBase(res)
        /*  } */
        wx.showToast({
          title: '设置成功',
          icon: 'success',
          duration: 2000
        })
      }
    })
  },

我这里后端需要保存的是base64的图片格式.所以这里进行了转换:

/**
   * 选取的转为base64字符串
   * @param {*} res 
   */
  transformBase(res) {
    let that = this;
    var FSM = wx.getFileSystemManager();
    //循环将得到的图片转换为Base64
    for (let r in res.tempFilePaths) {
      // console.log(res.tempFilePaths[r])
      FSM.readFile({
        filePath: res.tempFilePaths[r],
        encoding: "base64",
        success: function (data) {
          let Working = data.data;
          that.setData({
            ucimage: Working,
          })
          console.log('转换后的base', Working)
        }
      });
    }
  },

设置成功后绑定src展示图片:

?

后端保存(解析base64图片保存.并存进数据库);简单的分享两个方法:

/**
     * 新的保存图片，路径文件加了一个摄像头名称
     * @param file
     * @param fileSysPath
     * @param name
     * @param saveType
     * @return
     * @throws Exception
     */
    public static String newSaveFileByBase64Str(String file,String fileSysPath,String name,String saveType) throws Exception{
        if (file == null) {
            throw new RuntimeException("保存图片失败，没有发现图片");
        }
        BASE64Decoder decoder = new BASE64Decoder();
        // Base64解码
        byte[] imageByte = decoder.decodeBuffer(file);
        for (int i = 0; i < imageByte.length; ++i) {
            if (imageByte[i] < 0) {// 调整异常数据
                imageByte[i] += 256;
            }
        }
        String times = DateTimeUtils.getCurrentDate();
        //String folderPath = saveType + "/" + times + "/" + snapshot;
        String folderPath = saveType + "/" + times;
        return saveBaseFile(imageByte,fileSysPath,folderPath,name,false);
    }

/**
     *
     * @param file MultipartFile
     * @param fileSysPath 文件默认保存系统路径
     * @param folderPath 文件保存指定的文件夹路径
     * @param name 指定文件名 "":由系统自动生成
     * @param isCompress false：普通保存 true：压缩保存
     * @return
     * @throws Exception
     */
    protected static String saveBaseFile(byte[] file, String fileSysPath, String folderPath, String name, boolean isCompress) throws Exception{
        //创建文件保存路径
        File path = new File(fileSysPath + "/" + folderPath);
        if (!path.exists()) {
            if (!path.mkdirs()) {
                throw new RuntimeException("资源目录创建失败");
            }
        }
        String fileName = StringUtils.isEmpty(name) ? UUIDUtils.createTimestampUUID() : name;
        String fullPath = fileSysPath + "/" + folderPath + "/" + fileName;
        FileOutputStream outOri = null;
        try {
            outOri = new FileOutputStream(fullPath);
            if (!isCompress)
                outOri.write(file);
            else
                Thumbnails.of(new ByteArrayInputStream(file)).scale(1f).outputQuality(0.5f).toOutputStream(outOri);
            outOri.flush();
            //outOri.close();
        } catch (Exception e) {
            throw new RuntimeException("写文件出现异常");
        }finally {
            outOri.close();
        }
        return folderPath + "/" + fileName;
    }

end;