赞
踩
用户中心界面点击编辑资料后 进入编辑页面完成用户头像的上传与修改
提示:这里描述项目中遇到的问题:
在维护一个uniapp项目时,在字节开发者工具中编译后,用户登陆后获取到信息后,进入到编辑资料页面后头像不展示,u-upload组件一整个失效:
- <u-upload ref="uUpload" @on-success="uploading" @on-remove="remove" :action="action" width="250" height="250">
- <view slot="addBtn" class="headPortrait" v-if="prosperity">
- <image class="headPortrait_image" :src="avatar" mode=""></image>
- <view class="headPortrait_background">
- <view class="lucency" v-if="avatar == '' ">
- <image class="camera" src="../../static/xiangji.png" mode=""></image>
- </view>
- </view>
- </view>
- </u-upload>
也许是兼容性问题,之前同事在写这里的功能时,在u-upload组件内部使用了一个slot来放置初始的样式,在h5和微信小程序上可以实现,但是导致在字节开发者工具上编译就直接不展示。
所以头像这里是应该用uView的u-avatar组件来进行上传和编辑功能的实现,同时使用chooseImage方法和uploadfile方法来选择需要上传的图片并上传,可以实现上传和修改头像的功能,页面也会生效和展示。
- <template>
- <u-avatar :src="avatar" @click="alterHead()" mode="circle" size="250"></u-avatar>
- </template>
- <script>
- export default{
- data(){
- return(){
- action: '',//接口地址
- avatar: '', //头像
- }
- },
-
- methods:{
- alterHead() {
- var _this = this;
- let res = {}
- uni.chooseImage({
- count: 1, //默认9
- // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
- sourceType: ['album', 'camera'], //从相册选择
- success: function(res) {
- const tempFilePaths = res.tempFilePaths
- uni.uploadFile({ // 调用文件上传
- url: _this.action, // 上传的地址
- filePath: tempFilePaths[0], // 上传的图片地址
- fileType: 'image', // 确定上传文件类型
- name: 'file',
- success: (res) => {
- // 头像信息
- _this.avatar = JSON.parse(res.data).data.path
- },
- fail: (err) => {
- uni.showToast({
- title: '上传失败'
- })
- }
- })
- }
- })
- }
- }
- }
-
- </script>
路漫漫其修远兮,吾将上下而求索!记录工作中遇到的一些bug~ 有用的话可以给我点个赞鼓励一下嘛~ 笔芯