uniapp实现头像上传功能

╰半夏微凉° 2022-10-16 07:13 534阅读 0赞

## uniapp实现头像上传功能 ##

##### 步骤： #####

大概分为以下3步  
1.点击触发事件  
2.选择图片  
3.通过接口上传

##### 1.事件触发 #####

##### 2.事件中调用uni方法 `uni.chooseImage(OBJECT)` #####

官方文档链接 `https://uniapp.dcloud.io/api/media/image?id=chooseimage`

chooseImage(){ 
    		uni.chooseImage({ 
    			count:1,//限制最大上传图片数量
    			sizeType: ['original', 'compressed'],//图片压缩还是原图
    			success: (res) => { 
    			//图片选择成功的回调
    			//res中返回一个图片本地的临时地址
    					console.log(res)
    				}
    			)}

##### 2.事件中调用uni方法 `uni.uploadFile(OBJECT)` #####

官方文档链接：`https://uniapp.dcloud.io/api/request/network-file?id=uploadfile`

chooseImage(){ 
    				uni.chooseImage({ 
    					count:1,
    					sizeType: ['original', 'compressed'],
    					success: (res) => { 
    						const tempFilePaths =res.tempFilePaths//图片临时数组
    						console.log(tempFilePaths)
    						uni.uploadFile({ 
    						//请求的url接口地址
    							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)
    							}
    						})
    					}
    				})
    			},