Uniapp上传头像（2024记录）

记录一：

      相册选择图片并上传

         从相册选择图片并上传，使用uni.uploadFile来上传。

uni.chooseImage({
  sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album'], //从相册选择,或者使用相机
  success: function (chooseImageRes) {
    const tempFilePaths = chooseImageRes.tempFilePaths
    console.log(tempFilePaths[0])
    uni.uploadFile({
      url: `http://xxxxx`, 
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        file: tempFilePaths[0]
      },
      header: {
        // token的参数名称，可在网络请求中查看
        'Jq-Auth': getStorage()
      },
      success: (uploadFileRes) => {
        console.log(uploadFileRes.data)
      }
 })

记录二：

事件参数api：
详见：uni.chooseImage(OBJECT) | uni-app官网 

<view class="chooseImg" @tap="openChooseImg">
	<text v-if="!imgUrl">+</text>
	<image v-else :src="imgUrl" ></image> 
</view>

data(){
	return{
		imgUrl:""
	}
}

/* 上传头像 */
			openChooseImg(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择，和摄像头功能，默认二者都有
				    success: res=> {
						console.log(res)     
						/*res.tempFilePaths[0]是获取到的第一个数据的blob地址，将他赋值给数据区的imgUrl*/
						this.imgUrl=res.tempFilePaths[0]
						console.log(this.imgUrl)
				    }
				});
			}

记录三：

 

<view class="cleaner-top" @click="chooseImg">
      <view class="cleaner-avatar">
        <image :src="imgArr" mode=""></image>
      </view>
      <view class="cleaner-name">
        点击修改头像
      </view>
    </view>

data() {
      return {
        imgArr:"/static/image/manger_pages/avatar-img.png",
      }
    },

 

methods: {
      // 选择图片
      chooseImg() {
        uni.chooseImage({
        	success: (chooseImageRes) => {
        		const tempFilePaths = chooseImageRes.tempFilePaths;
            // 更新页面的渲染
            this.imgArr = tempFilePaths
            // 上传图片
 
        	}
        })
      },
    }