界面預(yù)覽：

云開發(fā)控制臺拿到的數(shù)據(jù)：

云函數(shù)編寫：

'use strict';
exports.main = async (event, context) => {
    //event為客戶端上傳的參數(shù)
    console.log('event : ', event)
    
    //返回數(shù)據(jù)給客戶端
    return new Promise((resolve,reject) => {
        const db = uniCloud.database()
        db.collection("user").add(event).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
};

代碼：

<template>
    <view class="content">
        <text style="font-weight: bolder;">頭像上傳</text>
        <!-- 圖片上傳區(qū) -->
        <form action="" @submit="formSubmit">
            
            <view @tap="chooseFile" style="width: 400upx;height: 400upx;background-color: #C0C0C0;">
                <image :src="userInfo.imgSrc" style="width: 100%;height: 100%;" mode=""></image>
            </view>
            用戶：<input style="width: 100%;border: 1upx solid #007AFF;" type="text" name="userName" id="">
            密碼：<input style="width: 100%;border: 1upx solid #007AFF;" type="text" name="password" password="" value="" />
            <button type="primary" form-type="submit" style="margin-top: 20upx;">確認(rèn)上傳</button>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userInfo:{
                    imgSrc:'',
                    userName:'',
                    password:''
                }
            }
        },
        onLoad() {
            
        },
        methods: {
            chooseFile(){
                uni.chooseImage({//選擇圖片
                    count:1,
                    success: (res) => {
                        console.log('頭像緩存成功')
                        this.userInfo.imgSrc = res.tempFilePaths[0]
                    }
                })
            },
            formSubmit(e){//處理表單
                let that = this
                console.log(e.detail.value)
                that.userInfo.userName = e.detail.value.userName
                that.userInfo.password = e.detail.value.password
                //上傳操作
                uniCloud.callFunction({
                    name:"upLoad",
                    data:that.userInfo
                }).then(res => {
                    console.log(res,'數(shù)據(jù)上傳成功')
                }).catch(err =>{
                    console.log(err)
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

</style>