学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

162 lines
4.0 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
  1. <template>
  2. <view class="pageBgImg">
  3. <topNavbar title="上传头像"></topNavbar>
  4. <view class="pad">
  5. <view class="card">
  6. <view class="h2">请上传或拍摄一张五官清晰的照片</view>
  7. <view class="phone" @click="uploadTap" v-if="!avatar">
  8. <view class="phoneIcon">
  9. <image src="@/static/images/index/btn_tupian.png" mode=""></image>
  10. </view>
  11. <view class="lab">添加图片</view>
  12. </view>
  13. <view class="phone" v-else @click="uploadTap">
  14. <image :src="avatar" mode=""></image>
  15. </view>
  16. <view class="btnBg" @click="$goPage('/pages/indexEntry/enroll/registInfo/registInfo')">上传</view>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import { APP_API, APP_HOST } from '@/site.config.js';
  23. const _url = APP_HOST + APP_API + '/util/manage/uploadFile.do';
  24. export default {
  25. data() {
  26. return {
  27. avatar: ''
  28. }
  29. },
  30. onLoad() {
  31. uni.$on('uAvatarCropper',(url)=>{
  32. // console.log('裁剪后的图片路径')
  33. this.avatar = url
  34. console.log(url)
  35. })
  36. },
  37. methods: {
  38. addImage() {
  39. var that = this;
  40. // 从本地相册选择图片或使用相机拍照。
  41. uni.chooseImage({
  42. count: 1, //最多可以选择的图片张数,默认9
  43. //album 从相册选图,camera 使用相机,默认二者都有。
  44. sourceType: ['album'],
  45. success: function(res) {
  46. //获取图片信息。
  47. uni.getImageInfo({
  48. src: res.tempFilePaths[0],
  49. success: function(image) {
  50. that.src = (res.tempFilePaths[0]);
  51. console.log('这都能成功')
  52. console.log(that.src); //打印出图片信息,在浏览器上打开就是你上传的图片
  53. //将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data
  54. }
  55. })
  56. }
  57. })
  58. },
  59. //选择图片
  60. chooseImages(type) {
  61. uni.chooseImage({
  62. count: 1, //允许选择的数量
  63. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  64. sourceType: ['album', 'camera'], //从相册选择
  65. success: res => {
  66. uni.showLoading({
  67. title: '图片上传中...'
  68. });
  69. res.tempFilePaths.forEach( (item,index)=>{
  70. this.uploadImgApi(item)
  71. })
  72. }
  73. })
  74. },
  75. uploadTap() {
  76. const _this = this;
  77. uni.chooseImage({
  78. count: 1, // 默认9
  79. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  80. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  81. success: (res) => {
  82. let url = res.tempFilePaths[0];
  83. // 获取裁剪图片资源后,给data添加src属性及其值
  84. uni.navigateTo({
  85. url: '/pages/indexEntry/enroll/uploadAvatar/uAvatarCropper/uAvatarCropper?url=' + encodeURIComponent(url)
  86. })
  87. }
  88. });
  89. },
  90. uploadImgApi(filePath) {
  91. console.log(filePath)
  92. let _this = this
  93. // 上传图片到服务器
  94. uni.uploadFile({
  95. url: _url,//接口
  96. filePath: filePath,//要上传的图片的本地路径
  97. name: 'file',
  98. formData: {
  99. fileType: 1,
  100. fileSuffix: "png"
  101. },
  102. header: {
  103. token: uni.getStorageSync("Authorization") || '',
  104. },
  105. success(res) {
  106. console.log('上传成功')
  107. let res2 = JSON.parse(res.data)
  108. _this.imgArr.push(res2.data)
  109. console.log(res2)
  110. uni.hideLoading();
  111. },
  112. complete: ()=> {}
  113. })
  114. },
  115. }
  116. }
  117. </script>
  118. <style lang="scss" scoped>
  119. .card {
  120. display: flex;
  121. align-items: center;
  122. flex-direction: column;
  123. .h2 {
  124. padding: 126rpx 0 84rpx 0;
  125. font-size: 36rpx;
  126. font-weight: 600;
  127. }
  128. }
  129. .phone {
  130. border: 2rpx dashed #CDCED0;
  131. width: 290rpx;
  132. height: 290rpx;
  133. border-radius: 16rpx;
  134. overflow: hidden;
  135. display: flex;
  136. align-items: center;
  137. justify-content: center;
  138. flex-direction: column;
  139. .phoneIcon {
  140. width: 60rpx;
  141. height: 60rpx;
  142. }
  143. .lab {
  144. font-size: 20rpx;
  145. color: #686B73;
  146. margin-top: 8rpx;
  147. }
  148. }
  149. .btnBg {
  150. width: 396rpx;
  151. margin: 130rpx 0;
  152. }
  153. </style>