uniapp 头像裁剪-JZTXT

uniapp 上传主要就是用到了俩个方法 uni.chooseImage()和uni.uploadFile()。照抄就行

//view部分

<view class="img-boxs">
            <image :src="from.avatar" @click="handleUpImg"> </image>
            <cover-view>修改头像</cover-view>
        </view>

data 部分

from : {
                    avatar :'https://cdn.uviewui.com/uview/common/logo.png',
                },

方法部分

handleUpImg() {// 点击图片区域，选择图片并上传
                uni.chooseImage({// 选择图片
                    count: 1,
                    success: (res) => {// 图片选择成功的回调（必传），会返回一个对象
                        this.from.avatar = res.tempFilePaths[0] // 用于更新视图
                        uni.uploadFile({
                            url: " 服务器IP + 端口 + 接口 ", // 请求地址
                            filePath: res.tempFilePaths[0], // 临时文件路径
                            name: "avatarfile", // 文件对应的key值
                            header: {
                                token: 自行获取 // 需要带的请求头，token等等
                            },
                            // formData: {// 额外的请求数据
                            //     uesrName: this.userInfo.userName
                            // },
                            success: (res) => {// 成功后的回调
                                console.log("修改成功");
                            }
                        })
                    }
                })
            }