uniapp项目(vue3)修改小程序头像，并上传图片到oss(华为云)

概要

项目使用uniapp开发小程序，需要实现切换头像功能，需要支持使用微信头像和手机相册选择头像。由于小程序用户头像昵称获取规则调整，所以使用微信提供的头像昵称填写能力来实现头像切换功能
提示：微信头像填写能力会唤起弹窗，内置选择微信头像，相册上传，拍照功能

实现流程

使用微信提供的头像昵称填写能力，获取图片上传到 oss 服务，返回 oss 上图片的url地址，并将其保存到数据库中

1. 获取图片临时地址（wxfile://temp… 、 http://temp…）
2. 请求自己的服务端接口，获取 oss 签名后的地址，用来上传图片到 oss
3. 将临时地址转为ArrayBuffer,上传到 oss
4. 微信公众号后台配置上传域名的合法接口
   

实现代码示例

index.vue文件

<template><button open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><image src="{{avatarUrl}}"></image></button> 
</template>
<script lang="ts" setup>
import {ref} from 'vue'const avatarUrl = ref('')const onChooseAvatar = (e)=>{// e.detail.avatarUrl 就是微信头像填写能返回的图片临时地址 wxfile://temp/xxxxx.jpg 或 http://temp/xxxxx.jpgconst { avatarUrl } = e.detail// 获取图片名称和扩展名，后端需要用来签名（后端要求）const splitPathArr = avatarUrl.split('/')const len = splitPathArr.lengthconst filename= splitPathArr[len - 1]const [name,ext]= filename.split('.')const mineType = ext ? `image/${ext}` : 'image/jpeg'// 请求自己服务端的地址，按照后端的要求传输数据myGetUploadUrl({httpMethod: 'PUT', // 用于签名contentType: mineType, // 用于签名key: filename, // 用于签名}).then((data:uploadUrl)=>{// uploadUrl 是后端签名后返回的 oss 上传地址// uni.getFileSystemManager().readFile获取文件的信息，不配置encoding默认转为ArrayBufferuni.getFileSystemManager().readFile({filePath: avatarUrl,success: ({ data: fileBuffer}) => {uni.request({method: 'PUT', // 推送的方法需要和myRequest的 httpMethod一致url: uploadUrl, // 后端返回的 oss 上传地址data: fileBuffer, // 上传图片的buffer数据header: {'Content-Type': mineType, // 需要和myRequest的 contentType一致},success: () => {// 上传地址的前半部分就是 oss 上的图片地址，直接取出来const imgUrl = uploadUrl.substring(0, res.data.indexOf('?'))avatarUrl.value = imgUrl myUpdateInfo({avatar: imgUrl,}).then(()=>{console.log('头像更新成功')})}})}})})
}
</script>