如何使用uniapp开发头像上传功能

如何使用uniapp开发头像上传功能

1. 简述

头像上传功能是移动APP中常见的功能，用户可以通过上传自己或者选择已有的图片进行头像的修改，提高用户的个性化体验。而uniapp在跨平台开发方面表现优异，本文将详细介绍如何使用uniapp开发头像上传功能。

2. 实现步骤

2.1 实现界面

首先需要在APP中实现一个头像上传的界面，在此界面中需要包含以下几个元素：

头像上传区域：用来展示用户所上传的头像图片

上传按钮：用来触发上传事件

选择按钮：用来选取手机中的图片

以下是头像上传界面的实现代码：

<template>
    <view>
        <view class="uploadArea">
            <image @tap="chooseImage" :src="avatarUrl" mode="aspectFill" 
            class="avatar"></image>
            <button type="primary" class="uploadBtn" @tap="uploadImage">上传</button>
        </view>
        <button type="default" class="chooseBtn" @tap="chooseImage">选择图片</button>
    </view>
</template>
<script>
    export default {
        data () {
            return {
                avatarUrl: '默认头像地址'
            }
        },
        methods: {
            chooseImage () {
                //选择图片方法，可以从uniapp官方文档中找到
            },
            uploadImage () {
                //上传图片方法，可以从uniapp官方文档中找到
            }
        }
    }
</script>
<style>
    //界面样式代码
</style>

值得注意的是，以上代码只是一个界面的原型，暂未包含图片的上传功能。

2.2 实现上传功能

实现上传功能需要调用uniapp提供的API，并将其封装为Promise对象，方便调用。

//上传图片封装代码
export const uploadFile = (filePath, url) => {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: url,
            filePath: filePath,
            name: 'file',
            success: res => {
                resolve(res.data)
            },
            fail: err => {
                reject(err)
            }
        })
    })
}

其中，uploadFile方法是一个Promise方法，其接收两个参数：filePath、url，分别代表要上传图片的路径和服务器地址，其返回一个Promise对象。

在代码中调用uploadFile方法：

//获取到选择的文件路径之后进行上传
this.uploadFile(this.tempFilePaths[0], 'http://xxx.xxx.xxx.xxx/api/upload').then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

其中，uploadFile方法的参数就是选择的图片路径和要上传的接口地址，调用then方法获取返回值，调用catch方法捕获错误。

2.3 实现选择图片功能

选择图片功能也是使用uniapp提供的API实现，主要包括uni.chooseImage和uni.previewImage两个方法。

uni.chooseImage方法用来从手机中选择图片：

chooseImage () {
    uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
            this.tempFilePaths = res.tempFilePaths
            this.avatarUrl = res.tempFilePaths[0]
        }
    })
}

其中，count表示最多可选择图片的数量，sizeType表示压缩图片的方式，sourceType表示选择图片的来源。

uni.previewImage方法用来预览选择的图片：

previewImage () {
    uni.previewImage({
        urls: this.tempFilePaths,
        current: this.tempFilePaths[0],
        indicator: 'none',
        loop: false
    })
}

urls表示要预览的图片列表，current表示默认显示的图片所在位置，indicator表示指示点的显示方式，loop表示是否循环预览。

3. 总结

本文介绍了uniapp开发头像上传功能的实现步骤，包括界面的实现、上传功能的封装以及选择图片功能，通过以上详细介绍，相信读者已经掌握了如何使用uniapp开发头像上传功能。