uniapp 头像裁剪

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("修改成功");
                            }
                        })
                    }
                })
            }

 

// 第二种方法:

<u-upload @on-success="handleSuccess" max-count="1" :file-list="fileList" ref="uUpload"
                :auto-upload="true" action="/prod-api/smart/api/upload?type=2" :show-progress="false"></u-upload>

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

//接口返回的数据
            handleSuccess(data, index, lists, name) {
                console.log(data)
              // this.form.avatar = data.data.uuid
            },