微信小程序案例4-3头像上传下载的页面配置代码

微信小程序中实现头像上传和下载功能通常涉及到`imagePicker`选择图片以及`uploadFile`发送文件请求。以下是案例4-3的一个基本结构，我们假设有一个`User`组件，其中包含了头像的显示、上传和下载功能：

<!-- user.wxml -->
<view class="user">
  <view>
    <!-- 显示用户头像 -->
    <image src="{{ avatarUrl }}" mode="cover" />
  </view>
  <button bindtap="chooseImage">选择图片</button>
  <button wx:if="{{ avatarUrl }}" bindtap="downloadAvatar">下载头像</button>

  <!-- 隐藏的input用于filePicker -->
  <input type="file" style="display:none;" id="avatarInput" bindchange="handleImagePicker" />

  <!-- 隐藏的wx-request-id用于跟踪上传状态 -->
  <text wx:if="{{ uploading || downloading }}" hidden>{{ uploading ? '上传中...' : '下载中...' }}</text>
</view>

// user.js
Page({
  data: {
    avatarUrl: '',
    uploading: false,
    downloading: false
  },
  
  chooseImage: function() {
    this.selectImage();
  },
  
  handleImagePicker(e) {
    let file = e.target.files[0];
    // 调用微信API处理图片
    this.uploadImage(file);
  },
  
  uploadImage(file) {
    this.setData({
      uploading: true
    });
    
    wx.uploadFile({
      filePath: file.path,
      url: 'your/upload/api', // 替换为你实际的服务器地址
      success: res => {
        this.downloadImage(res.tempFilePath);
        this.setData({
          avatarUrl: res.url,
          uploading: false
        });
      },
      fail: () => {
        console.error('上传失败');
        this.setData({
          uploading: false
        });
      }
    });
  },
  
  downloadAvatar: function() {
    this.setData({
      downloading: true
    });
    
    wx.downloadFile({
      url: this.data.avatarUrl, // 下载的是上一步保存的url
      savePath: '/tmp/avatar.jpg',
      success: res => {
        console.log('下载成功', res);
        this.setData({
          downloading: false
        });
      },
      fail: () => {
        console.error('下载失败');
        this.setData({
          downloading: false
        });
      }
    });
  }
})

注意：你需要将上述代码中的`your/upload/api`替换为你实际的服务器接收文件上传的地方，并且确保服务器端能处理文件下载。