uniapp实现头像上传功能

uniapp实现头像上传功能

步骤：

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

1.事件触发

<view class="info_list" @click="chooseImage">
			<p>头像</p>
			<view>
				<image :src="userInfo.image" mode=""></image>
				<uni-icons type="arrowright" size="18" color="#A4A4A4"></uni-icons>
			</view>	
		</view>

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)
							}
						})
					}
				})
			},