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.jpg
	const { avatarUrl } = e.detail
	// 获取图片名称和扩展名，后端需要用来签名（后端要求）
    const splitPathArr = avatarUrl.split('/')
    const len = splitPathArr.length
    const 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默认转为ArrayBuffer
		uni.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>