wx2uni/pages/mine/changeAvatar/index.vue

<template>
    <!-- pages/changeAvatar/index.wxml -->
    <view class="container" hover-class="none" :hover-stop-propagation="false">
        <!-- <image class="" src="{{temporaryImg || userInfo.imgSrc}}" mode="" lazy-load="false" binderror="" bindload=""></image> -->
        <block v-if="temporaryImg || (userInfo.imgSrc != '' && userInfo.imgSrc != null && userInfo.imgSrc != 'null')">
            <image :src="temporaryImg || userInfo.imgSrc" style="" class="show-image" mode="aspectFill"></image>
        </block>
        <block v-else>
            <image style="" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/defaultAva.svg" class="show-image" mode="aspectFill"></image>
        </block>
        <view v-if="isSure" class="display-flex btnBox" hover-class="none" :hover-stop-propagation="false">
            <view class="weui-btn_primary fw500 mr16" @tap="cancelChoice" aria-role="button">取消</view>
            <view class="weui-btn_primary fw500 ysd-basebg-color" hover-class="thover" @tap="changeUserImgsrc" style="border: 1px solid var(--color-ysd)" aria-role="button">
                确定
            </view>
        </view>
        <!-- bindtap='chooseImage' -->
        <button v-else open-type="chooseAvatar" style="" @chooseavatar="choiceAvatar" class="change weui-btn_primary fw500 mt32" aria-role="button">更换头像</button>
    </view>
</template>

<script>
// pages/changeAvatar/index.js
let app = getApp();
export default {
    data() {
        return {
            files: [],
            userInfo: {
                imgSrc: ''
            },
            temporaryImg: '',
            isSure: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.setData({
            userInfo: app.globalData.user
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    methods: {
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage1() {},

        /**
         * 选择临时图片
         *
         *
         */
        chooseImage() {
            const that = this;
            uni.chooseImage({
                sizeType: ['original', 'compressed'],
                // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],
                // 可以指定来源是相册还是相机，默认二者都有
                success(res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    console.log(res);
                    that.setData({
                        files: that.files.concat(res.tempFilePaths),
                        temporaryImg: res.tempFilePaths[0],
                        isSure: true
                    });
                }
            });
        },

        changeUserImgsrc: function () {
            var that = this;
            // wx.chooseImage({
            // 	count: 1, // 默认9
            // 	sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
            // 	sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
            // 	success: function (res) {
            // 		// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            // 		var tempFilePaths = res.tempFilePaths;
            // 		// var formData = {'userId': app.globalData.userId};

            // 	},
            // });
            uni.uploadFile({
                url: app.globalData.ip + '/user/changeUserImgsrc',
                filePath: that.temporaryImg,
                name: 'uploadFile',
                header: app.globalData.headers2,
                // formData: formData, // HTTP 请求中其他额外的 form data
                success: function (res1) {
                    console.log(res1);
                    if (res1.statusCode == 200) {
                        var result = JSON.parse(res1.data);
                        if (result.status == 200) {
                            app.globalData.user.imgSrc = result.data.url;
                            app.globalData.showTips(that, '更改成功');
                            setTimeout(() => {
                                that.setData({
                                    userInfo: app.globalData.user,
                                    isSure: false
                                });
                                uni.navigateBack({
                                    delta: 1
                                });
                            }, 1000);
                        } else {
                            app.globalData.showTips(that, result.msg);
                        }
                    } else if (res.data.status == 9999) {
                        app.globalData.dialogNotLogin();
                    }
                },
                fail: function (res2) {}
            });
        },

        cancelChoice() {
            this.setData({
                isSure: false,
                temporaryImg: ''
            });
        },

        choiceAvatar(e) {
            console.log(e);
            const { avatarUrl } = e.detail;
            this.setData({
                temporaryImg: avatarUrl,
                isSure: true
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>