uni-app App端 FormData格式 头像上传 带 裁

1.需要用到 uni.chooseImage uni.uploadFile 这两个方法

2.代码如下：这是自己封装的 一个头像组件

• 1.组件引入

<zzAvatar
                :avatar="form.user.userPic?`${baseurlHead}${form.user.userPic}`:''" :avatar_name="'userPic'" :nickname="form.user.name"
                :width="'w-130'" :height="'h-130'" :is_upload="true" :is_camera="true"
                @chooseAvatar="chooseAvatar">
            </zzAvatar>

<template>
    <view class="zz-avatar bg-ff u-relative border-50 " :class="[width,height]" @click.stop="is_upload ? chooseAvatar():''">
        <image v-if="avatar" :src="avatar" mode="aspectFill" :class="[width,height,border]" class="border-50"></image>
         <!-- 没有头像 时 用名字代替 -->
        <view v-else :class="[width,height,border]" class="bg-1D61FF border-50px u-flex u-col-center u-row-center font-16px cor-ff font-weight-bold" >{{nickname?nickname.slice(nickname.length-1):'未命名'}}</view>    

         <!--性别 iconfont-->
        <view class="sex w-40 h-40 iconfont cor-ff font-weight-bold font-14px text-center border-1px-ff border-50 u-flex u-row-center u-col-center"
            :class="gender == 1?'bg-1890FF icon-nan':gender == 2 ?'bg-FF86E1 icon-nv':'bg-C0 icon-a-weizhi'" v-if="is_gender"></view>
          
        <!--相机 iconfont-->
        <view v-if="is_camera" class="xiangji w-40 h-40 cor-ff font-15px iconfont icon-xiangji u-flex u-row-center u-col-center u-abso border-50 u-p-b-4 u-p-l-4"></view>
    </view>
</template>

<script>
    import mixins from '@/common/js/mixin.js';
    export default {
        mixins: [mixins],
        name: "zz-avatar",
        props: {
            /* 宽度 */
            width:{
                type: String,
                default: 'w-100'
            },
            
            /* 高度 */
            height:{
                type: String,
                default: 'h-100'
            },
            
            border:{
                type:String,
                default:'',
            },
            
            /* 头像 */
            avatar:{
                type: String,
                default: ''
            },
            
            /* 头像 字段名代表 */
            avatar_name:{
                type: String,
                default: ''
            },
            
            /* 昵称 */
            nickname:{
                type: String,
                default: ''
            },
            
            /* 性别 */
            gender: {
                type: Number,
                default: 0
            },
            
            /* 是否显示性别标识 */
            is_gender:{
                type: Boolean,
                default: false
            },
            
            /* 是否 可以 上传头像 操作 */
            is_upload:{
                type: Boolean,
                default: false
            },
            
            /* 是否显示 相机 */
            is_camera:{
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                formData: {
                    type: Object,
                    default() {
                        return {};
                    }
                },
            };
        },
        methods:{
            /* 点击 上传头像  */
            chooseAvatar(){
                uni.chooseImage({
                    count: 1,
                    sourceType:['album'],
                    crop:{
                        width:200,
                        height:200,
                        resize:true
                    },
                    success:(res)=>{
                        console.log(res);
                        if(res.errMsg == "chooseImage:ok"){
                            let tempFiles = res.tempFiles; //path  size
                            this.uploadFile(tempFiles);
                        }
                    },
                    fail: ()=>{
                        this.showToast('上传失败');
                    }
                });
            },
            
            /* 上传 头像 转 话格式*/
            uploadFile(tempFiles){
                uni.uploadFile({
                    url: this.upload_action,//后台接口
                    filePath: tempFiles[0].path,// 上传图片 url
                    name:'files',
                    formData: this.formData,
                    header: this.header, // header 值
                    success: res => {
                        this.showToast(res.msg);
                        let data = JSON.parse(res.data) ? JSON.parse(res.data) : res.data;
                        if (![200, 201, 204].includes(res.statusCode)) {
                            
                        } else { // 上传成功
                            this.$emit('chooseAvatar',{name:this.avatar_name,avatar:data.data[0]});
                        }
                    },
                    fail: e => {
                        this.showToast('上传失败');
                    }
                });
            }
            
            
        }
    }
</script>

<style lang="scss" scoped>
    .zz-avatar{
        .sex{
            position: absolute;
            right: -4rpx;
            bottom: -4rpx;
        }
        
        .xiangji{
            background: rgba(0,0,0,0.7);
            bottom: 0px;
            right: 0px;
        }
    }
</style>

• 3.scss文件

// height  rpx
@for $i from 1 through 1000 {
    .h-#{$i} {
        height: $i + rpx;
    }
}
// lin-height  rpx
@for $i from 1 through 1000 {
    .l-h-#{$i} {
        line-height: $i + rpx;
    }
}

// width  rpx
@for $i from 1 through 500 {
    .w-#{$i} {
        width: $i + rpx;
    }
}

// border 圆角rpx
@for $i from 10 through 200 {
    .border-#{$i} {
        border-radius: $i + rpx;
    }
}