uniapp实现头像上传功能
uniapp实现头像上传功能步骤:大概分为以下3步1.点击触发事件2.选择图片3.通过接口上传1.事件触发<view class="info_list" @click="chooseImage"><p>头像</p><view><image :src="userInfo.image" mode=""></image><un
·
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)
}
})
}
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)