微信小程序:上传头像或图片用we-cropper裁剪后上传到自己的服务器/...下载后找到dist文件夹,将里面的三个文件复制到自己的项目中2.写一个点击事件where需要上传头像,获取路径后跳转到裁剪页面。setPhotoInfo(){wx.chooseMedia({count:1,//默认9sizeType:['compressed'],//可以指定是原图还是压缩后的图片,默认都有sourceType:['album','camera'],//是指定来源是相册还是相机,默认都有mediaType:['image'],//可选上传类型,这里只选择图片success(res){constsrc=res.tempFiles[0].tempFilePath//获取裁剪后的图片资源后,将src属性及其值添加到data中wx.navigateTo({url:'/pages/user/clipHeadImg/index?src='+src,})}})}3.在目录下新建一个page用来裁剪,在index.wxml中引入we-cropper.wxml//<封面视图类s="cropper-buttons"style="color:{{cropperOpt.boundStyle.color}}">取消上传在index.wxss中/*pages/user/clipHeadImg/index.wxss*/.cropper{位置:绝对;顶部:0;左:0;}.cropper-buttons{背景颜色:rgba(0,0,0,0.95);}.btn{颜色:#ffffff;}.cropper-buttons{显示:flex;弹性方向:行;证明内容:空格之间;对齐项目:居中;位置:绝对;底部:0;左:0;宽度:100%;高度:80px;填充:020rpx;框大小:边框框;行高:80px;z-index:9999999!important;}在index.js中importWeCropperfrom'../../../utils/weCropper/we-cropper'//之前复制过来的we-cropper.js的位置constapp=getApp()常量设备=wx.getSystemInfoSync()constwidth=device.windowWidthconstheight=device.windowHeight-80cropperOpt:{id:'cropper',targetId:'targetCropper',pixelRatio:device.pixelRatio,宽度,高度,比例:2.5,缩放:8,cut:{x:(width-300)/2,y:(height-260)/2,width:300,height:260},boundStyle:{颜色:"green",mask:'rgba(0,0,0,0.8)',lineWidth:1}}在onLoad中实例化onLoad(option){const{cropperOpt}=this.datacropperOpt.src=option.srccropperOpt.boundStyle.color="green"this.setData({cropperOpt})this.cropper=newWeCropper(cropperOpt).on('ready',(ctx)=>{}).on('beforeImageLoad',(ctx)=>{wx.showToast({title:'上传中',icon:'loading',duration:20000})}).on('imageLoad',(ctx)=>{wx.hideToast()})}接下来是事件touchStart(e){this.cropper.touchStart(e)},touchMove(e){this.cropper.touchMove(e)},touchEnd(e){this.cropper.touchEnd(e)},//点击取消返回上一页cancel(){setTimeout(()=>{wx.navigateBack({delta:1})},1000)},下面的步骤是最重要的是,将图片上传到你自己的服务器(你得到的最后一件事是一个链接)('.')+1)consttimeStamp=newDate().getTime()constfileName=`${timeStamp}.${nameLast}`constclientName=`/project/bidding/${fileName}`stsOss('yiyong-pub').then(res=>{if(res.data.code===200){constossData=res.data.datawx.uploadFile({url:ossData.host,//开发者的URLserverfilePath:src,name:'file',//文件必须填写。formData:{key:'project/bidding/'+fileName,policy:ossData.policy,OSSAccessKeyId:ossData.accessid,signature:ossData.signature,//'x-oss-security-token':securityToken//使用STS签名它必须不时传递。},success:(res)=>{if(res.statusCode===204){//获取加载的页面letpages=getCurrentPages();//获取上一页的对象letpage=pages[pages.length-2];if(page.refreshHeadImg){page.refreshHeadImg(ossData.host+clientName)}setTimeout(()=>{wx.navigateBack({delta:1,})},1000)}else{Toast.fail('上传失败,请稍后重试')}},失败:err=>{console.log(err);}});}else{Toast.fail(res.data.msg)}})}).catch((err)=>{wx.showModal({title:'Reminder',content:err.message})})},所以至此,整个过程结束。特别说明:这里使用标签的原因:因为这里引入了we-cropper.wxml文件,里面包含了