uniapp实现头像上传功能

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

uniapp实现头像上传功能

步骤:

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

1.事件触发
  1. <view class="info_list" @click="chooseImage">
  2. <p>头像</p>
  3. <view>
  4. <image :src="userInfo.image" mode=""></image>
  5. <uni-icons type="arrowright" size="18" color="#A4A4A4"></uni-icons>
  6. </view>
  7. </view>
2.事件中调用uni方法 uni.chooseImage(OBJECT)

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

  1. chooseImage(){
  2. uni.chooseImage({
  3. count:1,//限制最大上传图片数量
  4. sizeType: ['original', 'compressed'],//图片压缩还是原图
  5. success: (res) => {
  6. //图片选择成功的回调
  7. //res中返回一个图片本地的临时地址
  8. console.log(res)
  9. }
  10. )}
2.事件中调用uni方法 uni.uploadFile(OBJECT)

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

  1. chooseImage(){
  2. uni.chooseImage({
  3. count:1,
  4. sizeType: ['original', 'compressed'],
  5. success: (res) => {
  6. const tempFilePaths =res.tempFilePaths//图片临时数组
  7. console.log(tempFilePaths)
  8. uni.uploadFile({
  9. //请求的url接口地址
  10. url:'http://192.168.3.195:8080/api/member/member/uploadHeadImage',
  11. formData:{
  12. //请求中接口额外的参数
  13. id:'1385048044696801281'
  14. },
  15. fileType:'image',//图片类型
  16. filePath:tempFilePaths[0],//哪张图片
  17. name:'file',//对应接口的文件名称
  18. header:{ //请求头
  19. "Content-Type": "multipart/form-data"
  20. },
  21. success:(res)=>{
  22. //成功的回调
  23. //一般用于重新获取数据渲染页面
  24. console.log(res)
  25. },
  26. fail:(err)=>{
  27. //失败的回调
  28. console.log(err)
  29. }
  30. })
  31. }
  32. })
  33. },

发表评论

表情:
评论列表 (有 0 条评论,748人围观)

还没有评论,来说两句吧...

相关阅读