微信小程序实现图片裁剪并上传功能

<view>
  <button bindtap="chooseImage">选择图片</button>
  <image src="{{croppedImageUrl}}" mode="aspectFill"></image>
</view>

Page({
  data: {
    croppedImageUrl: '', // 裁剪后的图片链接
  },
  
  // 选择图片
  chooseImage: function() {
    wx.chooseImage({
      success: (res) => {
        const filePath = res.tempFilePaths[0];
        this.setData({
          croppedImageUrl: filePath // 显示选择的图片
        });
      }
    });
  }
});

import ImageCropper from 'image-cropper';

Page({
  data: {
    ...
  },
  
  // 选择图片
  chooseImage: function() {
    ...
    this.setData({
      croppedImageUrl: filePath // 显示选择的图片
    });
    
    // 创建图片裁剪实例，传入要裁剪的图片路径
    const imageCropper = new ImageCropper(filePath);
    
    // 设置裁剪框的宽高比例
    imageCropper.setAspectRatio(1);
    
    // 开始裁剪
    imageCropper.crop((result) => {
      if (result) {
        this.setData({
          croppedImageUrl: result.url // 显示裁剪后的图片
        });
      }
    });
  }
});

import ImageCropper from 'image-cropper';

Page({
  data: {
    ...
  },
  
  // 选择图片
  chooseImage: function() {
    ...
    
    // 创建图片裁剪实例，传入要裁剪的图片路径
    const imageCropper = new ImageCropper(filePath);
    
    // 设置裁剪框的宽高比例
    imageCropper.setAspectRatio(1);
    
    // 开始裁剪
    imageCropper.crop((result) => {
      if (result) {
        this.setData({
          croppedImageUrl: result.url // 显示裁剪后的图片
        });
        
        // 将裁剪后的图片上传至服务器
        wx.uploadFile({
          url: 'https://example.com/upload',
          filePath: result.path,
          name: 'file',
          success: (res) => {
            console.log(res.data); // 上传成功后的处理逻辑
          }
        });
      }
    });
  }
});