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

比眉伴天荒 2022-01-23 23:25 832阅读 0赞

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

## 功能 ##

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

## 实现 ##

这里首先我们要了解，通过uni-app提供的chooseImage接口返回的是图片的临时路径，除了你自己的项目里，其他任何地方都没办法查看图片的，这显然是不行的，我的解决办法是通过chooseImage接口获取临时路径，然后用了插件把图片转成base64格式，然后传给后台，后台再把base64格式的图片转成路径并保存  
这是用到的插件地址：[https://ext.dcloud.net.cn/plugin?id=123][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'
                        })
                      }
                    }
                  })
                })
              }
            })
          },

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

[https_ext.dcloud.net.cn_plugin_id_123]: https://ext.dcloud.net.cn/plugin?id=123