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

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

前端小白的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'
                    })
                  }
                }
              })
            })
          }
        })
      },