微信小程序对上传的图片进行裁剪

  1. 背景:

使用uniapp中uni.chooseImage的裁剪参数crop只能在App中生效,在微信小程序中不生效。

  1. 实现思路

  1. uni.chooseImage打开相册获取图片路径(uni.chooseImage(OBJECT) | uni-app官网 (dcloud.net.cn)

  1. 将获取到的图片路径传入wx.cropImage对图片进行裁剪(wx.cropImage(Object object) | 微信开放文档 (qq.com)

  1. 将裁减后的图片路径通过uni.uploadFile上传到服务器生成网络地址(uni.uploadFile(OBJECT) | uni-app官网 (dcloud.net.cn)

  1. 代码如下:

                // 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,"裁剪调用结束");
                          }
                        })
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序上传图片的方法很简单,你可以使用微信小程序的API来实现,具体步骤如下:1. 首先,在小程序的页面中,使用<image>标签来引用图片;2. 然后,在小程序的js文件中,调用wx.uploadFile函数来上传图片;3. 最后,在服务器端,使用相应的接口来处理上传图片,完成图片上传的操作。 ### 回答2: 微信小程序提供了丰富的接口来实现图片上传的功能。 首先,我们需要在小程序的代码中引入上传文件的API,即wx.uploadFile。该接口可以将本地图片文件上传到服务器。 然后,我们可以在小程序界面中添加一个图片选择的按钮,通过调用wx.chooseImage接口来实现用户选择图片的功能。这个接口会返回用户选择的图片的临时文件路径。 接下来,我们需要在小程序中创建一个事件处理函数,当用户点击图片选择按钮后,会触发该函数。函数中可以调用wx.uploadFile接口,将选择的图片文件上传到服务器。 上传文件的接口需要传入几个参数: - url:服务器的地址,用于接收上传文件的请求。 - filePath:被上传的文件的临时路径。 - name:后端接口中接收文件的字段名。 - header:请求头,用于传递其他的参数。 - formData:除文件外,需要向服务器提交的额外数据。 在上传成功或失败的回调函数中,我们可以根据服务器返回的结果进行相应的处理,如展示上传成功后的图片或提示上传失败等。 需要注意的是,在使用小程序上传文件的过程中,我们还需要确保服务器端已经配置好了文件上传的接口,并且服务器端能够正确地处理上传文件的请求。具体的服务器端接口开发过程可以根据后端语言和框架的不同进行相应的实现。 总结起来,微信小程序上传图片的过程可以简单概括为:用户选择图片 → 调用上传文件API将图片上传到服务器 → 处理上传成功或失败的回调函数来展示结果或提示用户。 ### 回答3: 微信小程序提供了上传图片的接口,开发者可以按照以下步骤来实现图片上传功能: 1. 当用户需要上传图片时,可以在前端界面中添加一个按钮或者其他触发上传事件的元素。 2. 在前端代码中,使用wx.chooseImage方法选择需要上传图片。该方法会调用用户手机中的相册或者拍照功能,用户可以选择一张或者多张图片。 3. 选择图片之后,可以使用wx.uploadFile方法进行上传。该方法需要传入一个配置对象,包含了上传的url、filePath、name等参数。 - url参数:指定图片上传的接口地址。 - filePath参数:选择的图片的本地路径。 - name参数:图片对应的后端字段名。 4. 调用wx.uploadFile方法之后,会执行一个上传过程,期间可以使用wx.showToast方法显示上传进度。 5. 在后端服务器中,接收到上传图片后,可以进行相关处理,例如保存到服务器的指定位置、修改数据库等。 6. 后端处理完成后,可以返回给前端相应的结果,例如上传成功或失败的提示信息,前端可以根据返回的结果来进行后续的操作。 需要注意的是,开发者在实现图片上传功能的过程中,还可以对图片进行压缩、裁剪等处理,以减少图片大小和提高上传速度。同时,还要注意保障用户隐私和用户体验,例如不要上传敏感信息和大量图片等,并在上传过程中给予用户足够的提示与反馈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值