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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐