devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

(二) uni 实现个人中心头像上传_uniapp个人中心图片怎么搞

作者：从前慢现在也慢 | 2024-03-22 09:56:29

赞

踩

uniapp个人中心图片怎么搞

先看效果

说下实现思路，在用户点击头像的时候 弹出选项 选择相册打开，选择头像后跳转到 头像裁剪页面，裁剪完成点击上传图像 上传到服务器上，返回个人主页并刷新本地个人图像

大概实现方式

1.点击用户头像 调用uni api打开相册选择照片，并返回临时路径，把这个临时路径传给 图片裁剪界面。

  1. tapUpdateImg() {
  2. 	const that = this;
  3. 	    uni.chooseImage({//打开手机本地相册
  4. 			count: 1,//只能选取一张照片
  5. 			sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
  6. 			success: function(res) {           
  7. 			uni.$once('updateHeadimg', that.refreshData);//监听裁剪界面返回事件
  8. 				uni.navigateTo({
  9. 					url: "../userInfo/updateHeadimg?imgUrl=" + res.tempFilePaths[0]
  10. 				})
  11. 			}
  12. 		})
  13. }

2.裁剪界面（通用代码自己需要修改上传业务逻辑） 代码很多耐心看，可以改成自己想要的 这个也是我找的模板

  1. <template>
  2. 	<view class="container">
  3. 		<view class="page-body uni-content-info">
  4. 			<view class='cropper-content'>
  5. 				<view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
  6. 					<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
  7. 						<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
  8. 						<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing"
  9. 						 @touchend.stop="contentTouchEnd" :style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
  10. 							<view class="uni-cropper-view-box">
  11. 								<view class="uni-cropper-dashed-h"></view>
  12. 								<view class="uni-cropper-dashed-v"></view>
  13. 								<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
  14. 								<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
  15. 								<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
  16. 								<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
  17. 								<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
  18. 								<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
  19. 								<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
  20. 								<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
  21. 								<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"
  22. 								 @touchend.stop="dragEnd"></view>
  23. 								<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
  24. 								<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
  25. 								<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
  26. 							</view>
  27. 						</view>
  28. 					</view>
  29. 				</view>
  30. 			</view>
  31. 			<view class='cropper-config'>
  32. 				<!-- <button type="primary reverse" @click="getImage" style='margin-top: 30upx;'> 选择图片 </button> -->
  33. 				<button type="warn" @click="getImageInfo" style='margin-top: 30upx;'> 上传图像 </button>
  34. 			</view>
  35. 			<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
  36. 		</view>
  37. 		<!-- <page-foot :name="name"></page-foot> -->
  38. 	</view>
  39. </template>
  40.  
  41. <script>
  42. 	import indexApi from '../../common/api/indexApi.js';
  43. 	let sysInfo = uni.getSystemInfoSync();
  44. 	let SCREEN_WIDTH = sysInfo.screenWidth
  45. 	let PAGE_X, // 手按下的x位置
  46. 		PAGE_Y, // 手按下y的位置 
  47. 		PR = sysInfo.pixelRatio, // dpi
  48. 		T_PAGE_X, // 手移动的时候x的位置
  49. 		T_PAGE_Y, // 手移动的时候Y的位置
  50. 		CUT_L, // 初始化拖拽元素的left值
  51. 		CUT_T, // 初始化拖拽元素的top值
  52. 		CUT_R, // 初始化拖拽元素的
  53. 		CUT_B, // 初始化拖拽元素的
  54. 		CUT_W, // 初始化拖拽元素的宽度
  55. 		CUT_H, //  初始化拖拽元素的高度
  56. 		IMG_RATIO, // 图片比例
  57. 		IMG_REAL_W, // 图片实际的宽度
  58. 		IMG_REAL_H, // 图片实际的高度
  59. 		DRAFG_MOVE_RATIO = 1, //移动时候的比例,
  60. 		INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
  61. 		DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
  62.  
  63. 	export default {
  64. 		/**
  65. 		 * 页面的初始数据
  66. 		 */
  67. 		data() {
  68. 			return {
  69. 				name: '杨大宝',
  70. 				imageSrc: '',
  71. 				isShowImg: false,
  72. 				// 初始化的宽高
  73. 				cropperInitW: SCREEN_WIDTH,
  74. 				cropperInitH: SCREEN_WIDTH,
  75. 				// 动态的宽高
  76. 				cropperW: SCREEN_WIDTH,
  77. 				cropperH: SCREEN_WIDTH,
  78. 				// 动态的left top值
  79. 				cropperL: 0,
  80. 				cropperT: 0,
  81.  
  82. 				transL: 0,
  83. 				transT: 0,
  84.  
  85. 				// 图片缩放值
  86. 				scaleP: 0,
  87. 				imageW: 0,
  88. 				imageH: 0,
  89.  
  90. 				// 裁剪框 宽高
  91. 				cutL: 0,
  92. 				cutT: 0,
  93. 				cutB: SCREEN_WIDTH,
  94. 				cutR: '100%',
  95. 				qualityWidth: DRAW_IMAGE_W,
  96. 				innerAspectRadio: DRAFG_MOVE_RATIO
  97. 			}
  98. 		},
  99. 		/**
  100. 		 * 生命周期函数--监听页面加载
  101. 		 */
  102. 		onLoad: function(opt) {
  103. 			this.imageSrc = opt.imgUrl;
  104. 		},
  105.  
  106. 		/**
  107. 		 * 生命周期函数--监听页面初次渲染完成
  108. 		 */
  109. 		mounted: function() {
  110. 			//this.getImage();
  111. 			this.loadImage();
  112.  
  113. 		},
  114. 		methods: {
  115. 			setData: function(obj) {
  116. 				let that = this;
  117. 				Object.keys(obj).forEach(function(key) {
  118. 					that.$set(that.$data, key, obj[key])
  119. 				});
  120. 			},
  121. 			// getImage: function() {
  122. 			// 	var _this = this
  123. 			// 	uni.chooseImage({
  124. 			// 		success: function(res) {
  125. 			// 			_this.setData({
  126. 			// 				imageSrc: res.tempFilePaths[0],
  127. 			// 			})
  128. 			// 			_this.loadImage();
  129. 			// 		},
  130. 			// 	})
  131. 			// },
  132. 			loadImage: function() {
  133. 				var _this = this
  134. 				uni.showLoading({
  135. 					title: '图片加载中...',
  136. 				})
  137.  
  138. 				uni.getImageInfo({
  139. 					src: _this.imageSrc,
  140. 					success: function success(res) {
  141. 						console.log(res);
  142. 						IMG_RATIO = res.width / res.height
  143. 						if (IMG_RATIO >= 1) {
  144. 							IMG_REAL_W = SCREEN_WIDTH
  145. 							IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
  146. 						} else {
  147. 							IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
  148. 							IMG_REAL_H = SCREEN_WIDTH
  149. 						}
  150. 						let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
  151. 						INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
  152. 						// 根据图片的宽高显示不同的效果   保证图片可以正常显示
  153. 						if (IMG_RATIO >= 1) {
  154. 							let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2);
  155. 							let cutB = cutT;
  156. 							let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2);
  157. 							let cutR = cutL;
  158. 							_this.setData({
  159. 								cropperW: SCREEN_WIDTH,
  160. 								cropperH: SCREEN_WIDTH / IMG_RATIO,
  161. 								// 初始化left right
  162. 								cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
  163. 								cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
  164. 								cutL: cutL,
  165. 								cutT: cutT,
  166. 								cutR: cutR,
  167. 								cutB: cutB,
  168. 								// 图片缩放值
  169. 								imageW: IMG_REAL_W,
  170. 								imageH: IMG_REAL_H,
  171. 								scaleP: IMG_REAL_W / SCREEN_WIDTH,
  172. 								qualityWidth: DRAW_IMAGE_W,
  173. 								innerAspectRadio: IMG_RATIO
  174. 							})
  175. 						} else {
  176. 							let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2);
  177. 							let cutR = cutL;
  178. 							let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2);
  179. 							let cutB = cutT;
  180. 							_this.setData({
  181. 								cropperW: SCREEN_WIDTH * IMG_RATIO,
  182. 								cropperH: SCREEN_WIDTH,
  183. 								// 初始化left right
  184. 								cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
  185. 								cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
  186.  
  187. 								cutL: cutL,
  188. 								cutT: cutT,
  189. 								cutR: cutR,
  190. 								cutB: cutB,
  191. 								// 图片缩放值
  192. 								imageW: IMG_REAL_W,
  193. 								imageH: IMG_REAL_H,
  194. 								scaleP: IMG_REAL_W / SCREEN_WIDTH,
  195. 								qualityWidth: DRAW_IMAGE_W,
  196. 								innerAspectRadio: IMG_RATIO
  197. 							})
  198. 						}
  199. 						_this.setData({
  200. 							isShowImg: true
  201. 						})
  202. 						uni.hideLoading()
  203. 					}
  204. 				})
  205. 			},
  206. 			// 拖动时候触发的touchStart事件
  207. 			contentStartMove(e) {
  208. 				PAGE_X = e.touches[0].pageX
  209. 				PAGE_Y = e.touches[0].pageY
  210. 			},
  211.  
  212. 			// 拖动时候触发的touchMove事件
  213. 			contentMoveing(e) {
  214. 				var _this = this
  215. 				var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
  216. 				var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
  217. 				// 左移
  218. 				if (dragLengthX > 0) {
  219. 					if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
  220. 				} else {
  221. 					if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
  222. 				}
  223.  
  224. 				if (dragLengthY > 0) {
  225. 					if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
  226. 				} else {
  227. 					if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
  228. 				}
  229. 				this.setData({
  230. 					cutL: this.cutL - dragLengthX,
  231. 					cutT: this.cutT - dragLengthY,
  232. 					cutR: this.cutR + dragLengthX,
  233. 					cutB: this.cutB + dragLengthY
  234. 				})
  235.  
  236. 				PAGE_X = e.touches[0].pageX
  237. 				PAGE_Y = e.touches[0].pageY
  238. 			},
  239.  
  240. 			contentTouchEnd() {
  241.  
  242. 			},
  243.  
  244. 			// 获取图片
  245. 			getImageInfo() {
  246. 				var _this = this;
  247. 				uni.showLoading({
  248. 					title: '头像上传中...',
  249. 				});
  250. 				// 将图片写入画布
  251. 				const ctx = uni.createCanvasContext('myCanvas');
  252. 				ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
  253. 				ctx.draw(true, () => {
  254. 					// 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
  255. 					var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W;
  256. 					var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H;
  257. 					var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W;
  258. 					var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H;
  259. 					uni.canvasToTempFilePath({
  260. 						x: canvasL,
  261. 						y: canvasT,
  262. 						width: canvasW,
  263. 						height: canvasH,
  264. 						destWidth: canvasW,
  265. 						destHeight: canvasH,
  266. 						quality: 0.5,
  267. 						canvasId: 'myCanvas',
  268. 						success: function(res) {										
  269. 							indexApi.uploadImg(res.tempFilePath,function(res1){
  270. 								uni.$emit("updateHeadimg", true);
  271. 								uni.navigateBack();
  272. 							})								
  273. 						},
  274. 						fail: function(error) {
  275. 							console.log(error);
  276. 						},
  277. 						complete:function(){
  278. 							uni.hideLoading();			
  279. 						}
  280. 					});
  281. 				});
  282. 			},
  283.  
  284. 			// 设置大小的时候触发的touchStart事件
  285. 			dragStart(e) {
  286. 				T_PAGE_X = e.touches[0].pageX
  287. 				T_PAGE_Y = e.touches[0].pageY
  288. 				CUT_L = this.cutL
  289. 				CUT_R = this.cutR
  290. 				CUT_B = this.cutB
  291. 				CUT_T = this.cutT
  292. 			},
  293.  
  294. 			// 设置大小的时候触发的touchMove事件
  295. 			dragMove(e) {
  296. 				var _this = this
  297. 				var dragType = e.target.dataset.drag
  298. 				switch (dragType) {
  299. 					case 'right':
  300. 						var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
  301. 						if (CUT_R + dragLength < 0) dragLength = -CUT_R
  302. 						this.setData({
  303. 							cutR: CUT_R + dragLength
  304. 						})
  305. 						break;
  306. 					case 'left':
  307. 						var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
  308. 						if (CUT_L - dragLength < 0) dragLength = CUT_L
  309. 						if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
  310. 						this.setData({
  311. 							cutL: CUT_L - dragLength
  312. 						})
  313. 						break;
  314. 					case 'top':
  315. 						var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
  316. 						if (CUT_T - dragLength < 0) dragLength = CUT_T
  317. 						if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
  318. 						this.setData({
  319. 							cutT: CUT_T - dragLength
  320. 						})
  321. 						break;
  322. 					case 'bottom':
  323. 						var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
  324. 						if (CUT_B + dragLength < 0) dragLength = -CUT_B
  325. 						this.setData({
  326. 							cutB: CUT_B + dragLength
  327. 						})
  328. 						break;
  329. 					case 'rightBottom':
  330. 						var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
  331. 						var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
  332.  
  333. 						if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
  334. 						if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
  335. 						let cutB = CUT_B + dragLengthY;
  336. 						let cutR = CUT_R + dragLengthX;
  337.  
  338. 						this.setData({
  339. 							cutB: cutB,
  340. 							cutR: cutR
  341. 						})
  342. 						break;
  343. 					default:
  344. 						break;
  345. 				}
  346. 			}
  347. 		}
  348. 	}
  349. </script>
  350.  
  351. <style>
  352. 	/* pages/uni-cropper/index.wxss */
  353.  
  354. 	.uni-content-info {
  355. 		position: fixed;
  356. 		top: 0;
  357. 		left: 0;
  358. 		right: 0;
  359. 		bottom: 0;
  360. 		display: block;
  361. 		align-items: center;
  362. 		flex-direction: column;
  363. 	}
  364.  
  365. 	.cropper-config {
  366. 		padding: 20upx 40upx;
  367. 	}
  368.  
  369. 	.cropper-content {
  370. 		min-height: 750upx;
  371. 		width: 100%;
  372. 	}
  373.  
  374. 	.uni-corpper {
  375. 		position: relative;
  376. 		overflow: hidden;
  377. 		-webkit-user-select: none;
  378. 		-moz-user-select: none;
  379. 		-ms-user-select: none;
  380. 		user-select: none;
  381. 		-webkit-tap-highlight-color: transparent;
  382. 		-webkit-touch-callout: none;
  383. 		box-sizing: border-box;
  384. 	}
  385.  
  386. 	.uni-corpper-content {
  387. 		position: relative;
  388. 	}
  389.  
  390. 	.uni-corpper-content image {
  391. 		display: block;
  392. 		width: 100%;
  393. 		min-width: 0 !important;
  394. 		max-width: none !important;
  395. 		height: 100%;
  396. 		min-height: 0 !important;
  397. 		max-height: none !important;
  398. 		image-orientation: 0deg !important;
  399. 		margin: 0 auto;
  400. 	}
  401.  
  402. 	/* 移动图片效果 */
  403.  
  404. 	.uni-cropper-drag-box {
  405. 		position: absolute;
  406. 		top: 0;
  407. 		right: 0;
  408. 		bottom: 0;
  409. 		left: 0;
  410. 		cursor: move;
  411. 		background: rgba(0, 0, 0, 0.6);
  412. 		z-index: 1;
  413. 	}
  414.  
  415. 	/* 内部的信息 */
  416.  
  417. 	.uni-corpper-crop-box {
  418. 		position: absolute;
  419. 		background: rgba(255, 255, 255, 0.3);
  420. 		z-index: 2;
  421. 	}
  422.  
  423. 	.uni-corpper-crop-box .uni-cropper-view-box {
  424. 		position: relative;
  425. 		display: block;
  426. 		width: 100%;
  427. 		height: 100%;
  428. 		overflow: visible;
  429. 		outline: 1upx solid #69f;
  430. 		outline-color: rgba(102, 153, 255, .75)
  431. 	}
  432.  
  433. 	/* 横向虚线 */
  434.  
  435. 	.uni-cropper-dashed-h {
  436. 		position: absolute;
  437. 		top: 33.33333333%;
  438. 		left: 0;
  439. 		width: 100%;
  440. 		height: 33.33333333%;
  441. 		border-top: 1upx dashed rgba(255, 255, 255, 0.5);
  442. 		border-bottom: 1upx dashed rgba(255, 255, 255, 0.5);
  443. 	}
  444.  
  445. 	/* 纵向虚线 */
  446.  
  447. 	.uni-cropper-dashed-v {
  448. 		position: absolute;
  449. 		left: 33.33333333%;
  450. 		top: 0;
  451. 		width: 33.33333333%;
  452. 		height: 100%;
  453. 		border-left: 1upx dashed rgba(255, 255, 255, 0.5);
  454. 		border-right: 1upx dashed rgba(255, 255, 255, 0.5);
  455. 	}
  456.  
  457. 	/* 四个方向的线  为了之后的拖动事件*/
  458.  
  459. 	.uni-cropper-line-t {
  460. 		position: absolute;
  461. 		display: block;
  462. 		width: 100%;
  463. 		background-color: #69f;
  464. 		top: 0;
  465. 		left: 0;
  466. 		height: 1upx;
  467. 		opacity: 0.1;
  468. 		cursor: n-resize;
  469. 	}
  470.  
  471. 	.uni-cropper-line-t::before {
  472. 		content: '';
  473. 		position: absolute;
  474. 		top: 50%;
  475. 		right: 0upx;
  476. 		width: 100%;
  477. 		-webkit-transform: translate3d(0, -50%, 0);
  478. 		transform: translate3d(0, -50%, 0);
  479. 		bottom: 0;
  480. 		height: 41upx;
  481. 		background: transparent;
  482. 		z-index: 11;
  483. 	}
  484.  
  485. 	.uni-cropper-line-r {
  486. 		position: absolute;
  487. 		display: block;
  488. 		background-color: #69f;
  489. 		top: 0;
  490. 		right: 0upx;
  491. 		width: 1upx;
  492. 		opacity: 0.1;
  493. 		height: 100%;
  494. 		cursor: e-resize;
  495. 	}
  496.  
  497. 	.uni-cropper-line-r::before {
  498. 		content: '';
  499. 		position: absolute;
  500. 		top: 0;
  501. 		left: 50%;
  502. 		width: 41upx;
  503. 		-webkit-transform: translate3d(-50%, 0, 0);
  504. 		transform: translate3d(-50%, 0, 0);
  505. 		bottom: 0;
  506. 		height: 100%;
  507. 		background: transparent;
  508. 		z-index: 11;
  509. 	}
  510.  
  511. 	.uni-cropper-line-b {
  512. 		position: absolute;
  513. 		display: block;
  514. 		width: 100%;
  515. 		background-color: #69f;
  516. 		bottom: 0;
  517. 		left: 0;
  518. 		height: 1upx;
  519. 		opacity: 0.1;
  520. 		cursor: s-resize;
  521. 	}
  522.  
  523. 	.uni-cropper-line-b::before {
  524. 		content: '';
  525. 		position: absolute;
  526. 		top: 50%;
  527. 		right: 0upx;
  528. 		width: 100%;
  529. 		-webkit-transform: translate3d(0, -50%, 0);
  530. 		transform: translate3d(0, -50%, 0);
  531. 		bottom: 0;
  532. 		height: 41upx;
  533. 		background: transparent;
  534. 		z-index: 11;
  535. 	}
  536.  
  537. 	.uni-cropper-line-l {
  538. 		position: absolute;
  539. 		display: block;
  540. 		background-color: #69f;
  541. 		top: 0;
  542. 		left: 0;
  543. 		width: 1upx;
  544. 		opacity: 0.1;
  545. 		height: 100%;
  546. 		cursor: w-resize;
  547. 	}
  548.  
  549. 	.uni-cropper-line-l::before {
  550. 		content: '';
  551. 		position: absolute;
  552. 		top: 0;
  553. 		left: 50%;
  554. 		width: 41upx;
  555. 		-webkit-transform: translate3d(-50%, 0, 0);
  556. 		transform: translate3d(-50%, 0, 0);
  557. 		bottom: 0;
  558. 		height: 100%;
  559. 		background: transparent;
  560. 		z-index: 11;
  561. 	}
  562.  
  563. 	.uni-cropper-point {
  564. 		width: 5upx;
  565. 		height: 5upx;
  566. 		background-color: #69f;
  567. 		opacity: .75;
  568. 		position: absolute;
  569. 		z-index: 3;
  570. 	}
  571.  
  572. 	.point-t {
  573. 		top: -3upx;
  574. 		left: 50%;
  575. 		margin-left: -3upx;
  576. 		cursor: n-resize;
  577. 	}
  578.  
  579. 	.point-tr {
  580. 		top: -3upx;
  581. 		left: 100%;
  582. 		margin-left: -3upx;
  583. 		cursor: n-resize;
  584. 	}
  585.  
  586. 	.point-r {
  587. 		top: 50%;
  588. 		left: 100%;
  589. 		margin-left: -3upx;
  590. 		margin-top: -3upx;
  591. 		cursor: n-resize;
  592. 	}
  593.  
  594. 	.point-rb {
  595. 		left: 100%;
  596. 		top: 100%;
  597. 		-webkit-transform: translate3d(-50%, -50%, 0);
  598. 		transform: translate3d(-50%, -50%, 0);
  599. 		cursor: n-resize;
  600. 		width: 36upx;
  601. 		height: 36upx;
  602. 		background-color: #69f;
  603. 		position: absolute;
  604. 		z-index: 1112;
  605. 		opacity: 1;
  606. 	}
  607.  
  608. 	.point-b {
  609. 		left: 50%;
  610. 		top: 100%;
  611. 		margin-left: -3upx;
  612. 		margin-top: -3upx;
  613. 		cursor: n-resize;
  614. 	}
  615.  
  616. 	.point-bl {
  617. 		left: 0%;
  618. 		top: 100%;
  619. 		margin-left: -3upx;
  620. 		margin-top: -3upx;
  621. 		cursor: n-resize;
  622. 	}
  623.  
  624. 	.point-l {
  625. 		left: 0%;
  626. 		top: 50%;
  627. 		margin-left: -3upx;
  628. 		margin-top: -3upx;
  629. 		cursor: n-resize;
  630. 	}
  631.  
  632. 	.point-lt {
  633. 		left: 0%;
  634. 		top: 0%;
  635. 		margin-left: -3upx;
  636. 		margin-top: -3upx;
  637. 		cursor: n-resize;
  638. 	}
  639.  
  640. 	/* 裁剪框预览内容 */
  641.  
  642. 	.uni-cropper-viewer {
  643. 		position: relative;
  644. 		width: 100%;
  645. 		height: 100%;
  646. 		overflow: hidden;
  647. 	}
  648.  
  649. 	.uni-cropper-viewer image {
  650. 		position: absolute;
  651. 		z-index: 2;
  652. 	}
  653. </style>

3. 裁剪好后可以上传图像 上传业务逻辑

  1. //用户上传图像
  2. const uploadImg = (path, callback) => {
  3. 	uni.uploadFile({//上传文件api 
  4. 		url: '后台上传接口',
  5. 		filePath: path,
  6. 		name: 'file',
  7. 		success: (uploadFileRes) => {
  8. 			callback(uploadFileRes.data);
  9. 		}
  10. 	});
  11. }

*** 注意事项 在个人首页 会监听裁剪页面保存动作，裁剪了并保存成功了会返回 true ，根据true刷新个人头像

*** 注意事项 如果全部成功了 但是头像没有刷新 那么你可以在 头像那个 view 里面加上个 :key 属性，动态设置 :key 就行了，其实就是 :key 没改变 所以刷新不了，这个也坑了我一会了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/287037
推荐阅读