uniapp头像上传功能

问题:第一次做头像上传,使用普通的uni.request方法请求接口会报跨域

解决:实际上uni-app官方有头像上传的API,我也翻看了很多博主的文章,最后自己按照人家的思路敲出来了,方法如下:

​
​
<u-avatar :src="avatarUrl" @click="updateAvatar" :size="140" mode="circle"></u-avatar>


import define from '@/utils/define.js'


data() {
	return {
        baseURL:'',
        uploadImg: {},
        fileName: '',
        avatarUrl:'',//头像路径
	}
},
onLoad() {
        this.baseURL = define.baseURL
        this.userInfo = uni.getStorageSync('userInfo') || {}
        this.avatarUrl = uni.getStorageSync('headIcon') || ''
},				
methods:{
	//头像上传
			updateAvatar() {
				let baseUrl = this.baseURL + '/api/file/Uploader/UserAvatar'; //上传地址
				let _self = this
				uni.showActionSheet({
					itemList: ['从相册选择'],
					succes
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中实现头像的方法可以参考以下步骤: 1. 使用uni.chooseImage方法选择图片,该方法可以设置最大上图片数量和图片压缩选项。选择成功后,会返回一个图片本地的临时地址。\[2\] 2. 在选择成功的回调函数中,使用uni.uploadFile方法进行图片上。该方法需要设置请求的url接口地址、额外的参数、图片类型、文件路径、文件名称和请求头等。\[3\] 3. 在上成功的回调函数中,可以进行一些操作,比如重新获取数据并渲染页面。\[3\] 综合以上步骤,你可以在你的代码中添加以下内容来实现头像功能: ```javascript chooseImage() { uni.chooseImage({ count: 1, sizeType: \['original', 'compressed'\], success: (res) => { const tempFilePaths = res.tempFilePaths; // 图片临时数组 uni.uploadFile({ url: 'http://192.168.3.195:8080/api/member/member/uploadHeadImage', formData: { id: '1385048044696801281' // 请求中接口额外的参数 }, fileType: 'image', filePath: tempFilePaths\[0\], name: 'file', header: { "Content-Type": "multipart/form-data" // 请求头 }, success: (res) => { // 成功的回调,可以重新获取数据渲染页面 console.log(res) }, fail: (err) => { // 失败的回调 console.log(err) } }) } }) } ``` 这样,当你调用chooseImage方法时,会弹出图片选择的界面,选择成功后会进行图片上,并在上成功后进行相应的操作。 #### 引用[.reference_title] - *1* [uniapp头像功能](https://blog.csdn.net/m0_53393796/article/details/127066729)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [uniapp实现头像功能](https://blog.csdn.net/qq_51075057/article/details/117334827)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值