移动端上传头像

上传头像

<div class="touxiang">
   <van-image
     round
     fit="fill"
     :src=" upload != undefined && upload != null && upload != '' ? upload : require('@/assets/img/upload.jpg') "
     />
</div>
<van-uploader
  :after-read="onRead"
  :accept="'image/*'"
>
  <div class="bjtext">更换头像</div>
</van-uploader>

data() {
    return {
      upload: ''
    }
  },

mounted() {
    getInfo().then((res) => {
      var info = res.data.data
      if (info != null && info != undefined) {
        setUserInfo(info)
        if (info.upload != undefined && info.upload.length > 0) {
          this.upload = changeFileViewUrl(info.upload)
        }
      }
    })
  },
methods: {
    onRead(file) {
      // 上传图片到图片服务器
      const fd = new FormData()
      fd.append('file', file.file)
      uploadImg(fd).then((res) => {
        if (res.data.code == 0) {
          editUpload(res.data.data.id).then((res2) => {
            if (res2.data.code == 0) {
              this.upload = changeFileViewUrl(res.data.data.id)
              var info = getUserInfo()
              info.upload = res.data.data.id
              setUserInfo(info)
              this.$toast.success('照片上传成功！')
            }
          })
        } else {
          this.$toast.fail('照片上传失败！')
        }
      })
    }
  }