在 onChooseImage 这个事件处理方法里面，我们可以把用户选择的文件上传到后端服务 ..

在它里面用的这个 chooseImage 的成功回调里面 .. 可以先添加一个 images .. 它的值是 response 下面的 tempFilePaths ..

这样在设置页面上的 images 的时候，只需要简单的写成一个 images ..

下面再用一下 images 的 map ，map 是数组的一个方法 .. 它可以循环处理数组里面的项目 .. 给它一个回调 .. 每次循环的项目的名字叫 filePath .. 第二个参数是项目索引的名字 .. index

然后用微信提供给我们的 wx.uploadFile 去上传用户选择的这些文件 .. 给它一个对象参数 .. 一个 url 设置一下接口的地址 .. 用一个字符模板 .. 地址里面 包含 API_BASE 就是接口的基础部分 .. 斜线 .. 再加上一个接口里面的路由的部分 .. 用 API_ROUTE_MEDIA 表示 ..

在页面的最上面再去定义一下这两个东西 ..

之前我们已经添加了一个 API_BASE .. 就是接口的基础部分

这里可以再添加一个 API_ROUTE_MEDIA .. 媒体的路由部分是 wp/v2/media

再回到这个上传文件的方法 .. 继续再配置一些选项 ..

添加一个 filePath .. 对应的值是要上传的文件的路径 .. 这个路径就是 map 的回调里面的第一个参数 .. 这个参数也叫 filePath .. 所以这里简单的可以写成一个 filePath ..

再添加一个 name .. 名字是 file ..

上传媒体文件的时候后端服务要检查用户的权限 .. 所以这里可以添加一个 header ，添加一个额外的头部信息 .. 名字是 Authorization .. 它的值用一个字符模板 .. Bearer 空格 .. 后面要加上用户登录的时候后端服务签发给用户的 token 的值 ..

这个 token 数据我们把它放在小程序的全局里了 .. 在这个页面的 onShow 这个方法里，我们从全局那里拿到了这个数据，然后把它放在页面自己的数据里了 . 所以这个 token 的值是 this.data.jwt.token ...

文件上传成功会调用 success 方法 .. 添加一个这样的方法 .. 响应是 response ..

先把它输出到控制台上检查一下 ..

然后上传会返回上传任务 .. 给返回的东西起个名字 .. 可以叫它 uploadTask ..

## onProgressUpdate

在下面再用一下 uploadTask 里的 onProgressUpdate .. 一个回调 .. 添加一个 response 参数 .. 上传进度更新的时候会执行 onProgressUpdate 这个方法 .. 在这个方法里面我们可以去更新一下表示上传进度的数据 ..

在页面上先去添加一个新的数据，名字是 progress .. 默认让它等于一个空白的数组 ..

再回到这个 onProressUpdate 方法的里面 .. 先添加一个 progress .. 它的值是个数组 .. 数组里的项目是 this.data.progress 里面的东西 ..

然后在下面，再重新设置一下 progress 方括号 index ，这个 index 是当前文件的索引值 .. 让它等于 response 下面的 progress .. 就是当前文件的上传的进度 ..

下面再用一下 this.setData .. 重新设置一下 progress 这个数据的值 ...

## 预览

现在，在模板器上我们可以去试一下这个上传图片文件的功能 .. 按一下选择图片按钮 .. 选择一张图片 ..

小程序应该会把选择的图片上传到我们的后端服务 .. 上传的时候会在图片的下面显示上传的进度 ..

在控制台上会输出上传成功以后返回的响应 .. 这个响应里面的 data 属性的值就是上传图片文件成功以后，服务端给我们返回来的上传的这个媒体的相关信息 ..

再回到网站的管理后台 ..

打开 媒体 .. 在这里可以找到刚才我们在小程序里面上传的这张图片 ...