Taro 项目实现更改微信头像，使用七牛上传图片

一、效果图

二、taro 提供了选择图片的接口

https://taro-docs.jd.com/taro/docs/apis/media/image/chooseImage

// 文档提供的示例
Taro.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths}
})

三、代码实现

分两个部分：使用七牛上传图片、更换个人信息

1、使用七牛上传图片

上传七牛先要获取到七牛的token，这是后端提供获取token的接口

后端提供把图片上传到七牛的接口

更换个人信息的接口

在工具文件中中封装好了上传到七牛的请求函数

/*** 上传到七牛* @param [] list , list 里面是 file Object 的 Array { url: 本地链接, file: 源文件}*/
const transImgList = async (list) => {let imgTransPromise = list.map (item => {const qiniuTokenData = getGlobalData('qiniuTokenData');  //从缓存中获取的tokenconst otherparams = getSignDataAndOtherParams()  // 请求的必填参数，看自己的项目// console.warn('item.url', item.url)//appConfig.apiPrefix  是自己的服务器地址return Taro.uploadFile({url: `${appConfig.apiPrefix}/upload/img/one?${stringify(otherparams)}`,filePath: item.url,name: 'file',header: {Authorization: `token ${qiniuTokenData.token}`  //把token拿到，看自己的数据来获取},formData: {key: item.url},}).then ((res) => {let newImg = '';try {newImg = JSON.parse(res.data)['fileURL'];} catch (error) {newImg = '';}return newImg;})});let imgs = await Promise.all(imgTransPromise).then((imgList) => {return imgList});return imgs;  // 请求成功会返回图片的地址
}

在更换个人信息的页面中，在页面挂载的时候，获取到token

componentDidMount() {// 获取七牛Tokenthis.props.dispatch({type: 'qiniuUploader/fetchgetQiniuToken'   // 使用的是dva状态管理，请求获取token的接口}).then(res => {setGlobalData('qiniuTokenData', res.response.data) // 把token存储在全局缓存中})}

页面显示，点击头像区域触发回调handleOperaClick

 <View className="portrait flex-box jc-sb ai-ce" onClick={this.handleOperaClick} data-flag="portrait"><Text className="portrait-text flex-box ai-ce" >头像</Text><Image className="portrait-image flex-box ai-ce" src={utils.deepGet(userInfo, 'headImg')} /></View>

回调handleOperaClick

  handleOperaClick = (e) => {e.preventDefault();let {flag,} = e.currentTarget.dataset;switch (flag) {case 'portrait': {// 从手机相册中选择图片或使用相机拍照Taro.chooseImage({count: 1, sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'],  // 可以指定来源是相册还是相机}).then( async (res)=> {  //我使用链式写法，也可以使用官方文档提供的方式console.warn('chooseImage then', res)const files = [];  // 以下几行代码是为了处理成自己想要的格式[{file: {path: '', size: ''}, url: '' }]const obj = {};obj.file = res.tempFiles[0];obj.url = res.tempFilePaths[0];files.push(obj);  console.warn('then obj', files)// 上传到七牛返回的图片连接，可以在线访问const itemImgUrlLIst = await utils.transImgList(files || [])console.warn('then itemImgUrlLIst', itemImgUrlLIst)Taro.showLoading();// 把返回的链接传给更换个人信息的接口，完成头像更换this.props.dispatch({type: 'mine/fecthupdatePersonInfo',payload: {headImg: itemImgUrlLIst[0]  // 因为是个数组，获取数组第一个元素}}).then(res => {if (res.resultCode === 200) {Taro.hideLoading();utils.showToastMsg('更换头像成功');// 更换调全局缓存的数据，要不显示不出来const userInfo = getGlobalData('userInfo');userInfo.headImg = itemImgUrlLIst[0];setGlobalData('userInfo', userInfo);this.componentDidMount();}})})break;}case 'name': {Taro.navigateTo({url: `/subMinePages/UpdateName/UpdateName`})break;}case 'phone': {Taro.navigateTo({url: `/subMinePages/UpdatePhone/UpdatePhone`})break;}case 'address': {Taro.navigateTo({url: `/subMinePages/MyAddress/MyAddress`})break;}default: {break;}}}

以上是更换个人头像的大致流程，其他如上传评论图片、售后添加图片等一些需要上传图片的页面，也类似的操作。

Taro 项目实现更改微信头像，使用七牛上传图片相关推荐

七牛上传图片html,MWEB+七牛上传图片
MWEB+七牛上传图片博客之前的图片也都用的七牛,但编辑和上传分离还是很麻烦,所以一直很心水meb, 上周mweb降到50￥,感觉短期内应该不会再降了,于是果断入手,今天在和使用图床功能遇到了一些 ...
Android使用七牛上传图片踩坑及解决方案
Android开发上传图片到七牛的步骤 1. 集成七牛SDK compile 'com.qiniu:qiniu-android-sdk:7.3.+' 2. 获得上传凭证token用于上传图片到七牛这 ...
使用Simditor和七牛上传图片
2019独角兽企业重金招聘Python工程师标准>>> Simditor是tower开源的一款网页编辑器官方网址:http://simditor.tower.im 为了使Simdit ...
七牛上传图片html,使用七牛云上传图片
七牛云提供的空间还是很不错的.最近闲来无事,看了下七牛的相关东西,现把图片上传的部分记录一下使用七牛云需要自己注册账号,这个就不再赘述,很简单的申请好空间之后,上传需要一个上传凭证,七牛真的很体贴 ...
七牛上传图片初探开始上传暂停上传继续上传
效果代码 public class MainActivity extends AppCompatActivity {ListView listview;AlbumList albumList;@Ov ...
simditor上传图片php,使用Simditor和七牛上传图片
Simditor是tower开源的一款网页编辑器官方网址:http://simditor.tower.im 为了使Simditor编辑文档时能将图片自动从前端上传到qn,需要修改它的uploader. ...
HTML 七牛上传图片
好记忆不如按烂笔头 ... ... 简介七牛图片云存储,云操作做的还是很牛叉的,http://www.qiniu.com/ 没有为人打广告的意思. 给你一个上传图片的token ,就能往上面放置你的 ...
vue 七牛上传图片
这是我多年前写的很多都忘了从github找出来的 <template><div><w-subnav ref="subNav"></w- ...
android递归压缩上传多张图片到七牛
最近遇到这样一个需求:要做一个仿微信朋友圈的功能,要求上传最多九张图到七牛.七牛有上传图片的接口,但是每次只能上传一张.如果是九张图片一齐上传,使用for循环的话肯定不行的,很容易出错.因为上传七牛的 ...

Taro 项目实现更改微信头像，使用七牛上传图片

Taro 项目实现更改微信头像，使用七牛上传图片相关推荐

最新文章

热门文章