WeChat applet crops uploaded pictures

1. background:

Using the cropping parameter crop of uni.chooseImage in uniapp can only take effect in the App, not in the WeChat applet.

2. Implementation ideas

1. uni.chooseImage Open the album to get the image path ( uni.chooseImage(OBJECT) | uni-app official website (dcloud.net.cn) )

2. Pass the obtained image path to wx.cropImage to crop the image ( wx.cropImage(Object object) | WeChat Open Documentation (qq.com) )

3. Upload the cut image path to the server via uni.uploadFile to generate a network address ( uni.uploadFile(OBJECT) | uni-app official website (dcloud.net.cn) )

4. code show as below:

                // 1 打开相册获取图片路径
                uni.chooseImage({
                    count: 1, //默认选取1张图片
                    sourceType: ['album'], //从相册选择
                    success: function (res) {
                        // 2 对获取到的图片进行裁剪
                        wx.cropImage({
                          src: res.tempFilePaths[0], // 图片路径
                          cropScale: '1:1', // 裁剪比例
                          success:function(res){
                              // 3 将裁剪好的图片上传到服务器
                              uni.uploadFile({
                                  url: app.globalData.miniComent,//自己服务器的路径
                                  filePath: res.tempFilePath,//图片地址
                                  name: 'file',
                                  formData: {
                                      userCode:that.userCode
                                  },
                                  success: (res1) => {
                                      let url = JSON.parse(res1.data).data
                                      console.log(url,"裁剪成功后的图片网络地址");
                                      that.userInfo.headimgurl = url;//更新头像
                                  },
                                  complete: (res) => {
                                      console.log(res,"上传调用结束");
                                  }
                              });
                          },
                          complete: (res) => {
                              console.log(res,"裁剪调用结束");
                          }
                        })