uni-app 上传头像及回显 

1 <!-- 用户头像 -->
2         <view class="form-input">
3             <view class="label" style="display: flex; align-items: center;">{{ getText('userProfile') }}</view>
4             <view class="example-body custom-image-box">
5                 <uni-file-picker v-model="form.profileUrl" :value="form.profileUrl" limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
6                     file-mediatype="image" @select="uploadAvatar">选择</uni-file-picker>
7             </view>
8 
9 </view>
 1 data() {
 2         return {
 3             imageStyles: {
 4                 width: 64,
 5                 height: 64,
 6                 border: {
 7                     radius: '50%'
 8                 }
 9             },
10     
11 }                }

 

 1 // 上传头像
 2         uploadAvatar(e) {
 3             console.log("e:",e);
 4             this.avatarUrl = e.tempFilePaths[0]; // 获取图片的本地路径
 5             // 上传图片
 6             if (this.avatarUrl) {
 7                 const token = uni.getStorageSync('token');
 8                 uni.uploadFile({
 9                     url: getTotalUrl('/api/ybpf/pc/uploadImg'), // 你的服务器上传接口地址
10                     filePath: this.avatarUrl, // 选择的图片路径
11                     name: 'file', // 必填，后台用来解析的文件名
12                     header: {
13                         Authorization: token
14                     },
15                     success: (uploadFileRes) => {
16                         // 上传成功的处理...
17                         console.log("上传成功的处理...", JSON.parse(uploadFileRes.data));
18                         let data = JSON.parse(uploadFileRes.data)
19                         let argumentsObj = {
20                             name: data.data[0].name,
21                             type: "image",
22                             url: data.data[0].url
23                         }
24                         this.form.profileUrl = []
25                         this.form.profileUrl.push(argumentsObj)
26                         console.log("this.form.profile:",this.form.profileUrl);
27                     },
28                     fail: (err) => {
29                         // 上传失败的处理...
30                         console.error("上传失败的处理...",err);
31                     }
32                 });
33             }
34         },
// 提交
        async getInfoById(userId) {
            try {
                const { data } = await request(UPDATE_SUERINFO + userId, { method: 'GET'});
                console.log("提交成功返回data:",data);
                this.form = data
                this.form.roleId = Number( this.form.roleId )
                this.form.profile = this.form.profile.split(',')[0].split(';')[1];
                //回显设置成数组，不然不回显
                                let argumentsObj = {
                    name: '',
                    type: "image",
                    url: this.form.profile
                }
                this.form.profileUrl = []
                this.form.profileUrl.push(argumentsObj)
            } catch (e) {
                console.log('提交出错了：',e);
                return false;
            }
        },

 

posted on 2024-12-06 15:18  奔驰的码儿  阅读(430)  评论(0)    收藏  举报

导航