6.3. 上传头像

本教程最新版为 2.1,当前版本已放弃维护,请阅读最新版本!

上传头像

接着上一节的内容,修改个人信息还缺少修改头像的功能,这一节我们来增加这个功能。

封装上传方法

在小程序中上传文件需要使用 uploadFile 接口,同样需要添加 Authorization 头,为了方便使用,我们需要提前封装一下,因为是接口相关的代码,所以封装在 utils/api.js 文件中:

src/utils/api.js

.
.
.
const updateFile = async (options = {}) => {
  // 显示loading
  wepy.showLoading({title: '上传中'})

  // 获取 token
  let accessToken = await getToken()

  // 拼接url
  options.url = host + '/' + options.url
  let header = options.header || {}
  // 将 token 设置在 header 中
  header.Authorization = 'Bearer ' + accessToken
  options.header = header

  // 上传文件
  let response = await wepy.uploadFile(options)

  // 隐藏 loading
  wepy.hideLoading()

  return response
}
.
.
....

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
贡献者:1
讨论数量: 9

putixin
上传图片 404 错误?
0 个点赞 | 7 个回复 | 问答 | 课程版本 5.5
daviLee
编译无报错,小程序编译调用 Page 错误提示?
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
调用上传头像的 API 提示未定义?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
xuelong
App\Models\Image 出错?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
cocaomouse
修改个人信息->取消 报错:chooseImage:fail cancel
0 个点赞 | 1 个回复 | 问答 | 课程版本 2.1
黑哈尔
不太明白这里为什么命名是 `updateFile`
0 个点赞 | 1 个回复 | 问答 | 课程版本 2.0
qietugou
什么时候 方法应该放在 methods 里面?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5