当前位置:   article > 正文

uniapp 上传/修改头像编译在抖音小程序上失效的解决问题_抖音不能使用u-image

抖音不能使用u-image

项目场景:

用户中心界面点击编辑资料后 进入编辑页面完成用户头像的上传与修改


问题描述

提示:这里描述项目中遇到的问题:

在维护一个uniapp项目时,在字节开发者工具中编译后,用户登陆后获取到信息后,进入到编辑资料页面后头像不展示,u-upload组件一整个失效:

  1.  <u-upload ref="uUpload" @on-success="uploading" @on-remove="remove" :action="action" width="250" height="250">
  2.         <view slot="addBtn" class="headPortrait" v-if="prosperity">
  3.           <image class="headPortrait_image" :src="avatar" mode=""></image>
  4.           <view class="headPortrait_background">
  5.             <view class="lucency" v-if="avatar == '' ">
  6.               <image class="camera" src="../../static/xiangji.png" mode=""></image>
  7.             </view>
  8.           </view>
  9.         </view>
  10.       </u-upload>

原因分析:

也许是兼容性问题,之前同事在写这里的功能时,在u-upload组件内部使用了一个slot来放置初始的样式,在h5和微信小程序上可以实现,但是导致在字节开发者工具上编译就直接不展示。


解决方案:

所以头像这里是应该用uView的u-avatar组件来进行上传和编辑功能的实现,同时使用chooseImage方法和uploadfile方法来选择需要上传的图片并上传,可以实现上传和修改头像的功能,页面也会生效和展示。

  1. <template>
  2.   <u-avatar :src="avatar" @click="alterHead()" mode="circle" size="250"></u-avatar>
  3. </template>
  4. <script>
  5. export default{
  6. data(){
  7. return(){
  8. action: '',//接口地址
  9. avatar: '', //头像
  10. }
  11. },
  12. methods:{
  13.  alterHead() {
  14.         var _this = this;
  15.         let res = {}
  16.         uni.chooseImage({
  17.           count: 1, //默认9
  18.           // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  19.           sourceType: ['album', 'camera'], //从相册选择
  20.           success: function(res) {
  21.             const tempFilePaths = res.tempFilePaths
  22.             uni.uploadFile({ // 调用文件上传
  23.               url: _this.action, // 上传的地址
  24.               filePath: tempFilePaths[0], // 上传的图片地址
  25.               fileType: 'image', // 确定上传文件类型
  26.               name: 'file',
  27.               success: (res) => {
  28.                 // 头像信息
  29.                 _this.avatar = JSON.parse(res.data).data.path
  30.               },
  31.               fail: (err) => {
  32.                 uni.showToast({
  33.                   title: '上传失败'
  34.                 })
  35.               }
  36.             })
  37.           }
  38.         })
  39.       }
  40. }
  41. }
  42. </script>

路漫漫其修远兮,吾将上下而求索!记录工作中遇到的一些bug~  有用的话可以给我点个赞鼓励一下嘛~ 笔芯

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