uni-app修改头像并上传头像资源到服务器

最新推荐文章于 2025-07-11 11:28:23 发布

原创最新推荐文章于 2025-07-11 11:28:23 发布 · 1.1w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #头像 #image #base64

uni-app学习专栏收录该内容

20 篇文章

订阅专栏

本文记录前端小白的uni-app学习之路，介绍了从本地相册或拍照获取图片并传给后台，后台返回保存后图片地址的功能实现。通过uni-app的chooseImage接口获取图片临时路径，使用插件将图片转为base64格式传给后台，后台再将其转为路径保存。

前端小白的uni-app艰难学习之路

功能

要实现从本地相册或拍照获取图片，然后传给后台，后台返回保存后的图片地址

实现

这里首先我们要了解，通过uni-app提供的chooseImage接口返回的是图片的临时路径，除了你自己的项目里，其他任何地方都没办法查看图片的，这显然是不行的，我的解决办法是通过chooseImage接口获取临时路径，然后用了插件把图片转成base64格式，然后传给后台，后台再把base64格式的图片转成路径并保存
这是用到的插件地址：https://ext.dcloud.net.cn/plugin?id=123
在用插件之前，也曾试过别的办法，最后发现插件是最好用的
先看代码：

getPhoto: function () {
        let id = uni.getStorageSync('user').id
        uni.chooseImage({
        	count: 1,
          sourceType: ['album'],
          success:(res) => {
            pathToBase64(res.tempFilePaths[0])
            .then(base64 => {
              // console.log(base64)
              uni.request({
                url: urls.HTTP + '/user/uploadheadimg',
                method: 'POST',
                name: 'file',
                data: {
                  uid: id,
                  image: base64
                },
                success: (res) => {
                  console.log('上传头像', res)
                  if (res.data.code === 0) {
                    this.$store.dispatch('userInfo', res.data.user)
                    uni.setStorageSync('user', res.data.user)
                  } else {
                    uni.showToast({
                      title: res.data.error,
                      icon: 'none'
                    })
                  }
                }
              })
            })
          }
        })
      },

很简单的功能，希望对大家有帮助