一、效果图
二、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;}}}以上是更换个人头像的大致流程，其他如上传评论图片、售后添加图片等一些需要上传图片的页面，也类似的操作。
